如何读取外部json文件

时间:2016-01-19 05:18:47

标签: javascript jquery json

[
  ["timestamp","bfx_l","bfx_h","bfx_bv","bfx_b_s","bfx_b_l","bfx_s_s","bfx_s_s","okc_bv"  ],
  ["0","225.25","225.25","225.63248","","","","","224.32"  ],
  ["1","225.25","225.25","225.63248","","","","","224.32"  ],
  ["2","225.25","225.25","225.63527","225.03","","","","224.32"  ],
  ["3","225.25","225.25","225.62688","225.03","","","","224.32"  ],
  ["4","225.25","225.25","225.62688","","","","","224.32"  ],
  ["5","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["6","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["7","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["8","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["9","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["10","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["11","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["12","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["13","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["14","225.25","225.25","225.64536","224.57","","","","224.32"  ]
]

这是我的dataset.json外部json文件第一行作为标题,所有其他是数据

$.getJSON('dataset.json', function (data) {
                    alert(data);
                });

这是jquery的一个功能,但我无法使用此函数获取数据 我需要分开它的标题,然后逐行数据如何做到这一点? 提前谢谢

更新

我不需要使用变量的解决方案,而不是放入相同的文件,但我需要从外部json文件调用json,如上所述,并将该数据放在highstock图表中,所以我需要解决外部json文件的解决方案。

4 个答案:

答案 0 :(得分:1)

在第17行修复错误后(在结束方括号后删除多余的,),您必须以与在PHP中处理CSV相同的方式处理多维数组。

一种更有效的存储JSON(https://en.wikipedia.org/wiki/JSON)的方法是利用它为您提供的好处,并以对象表示法实际存储您的内容。而不是像以下那样的数组:

["13","225.25","225.25","225.62943","225.03","","","","224.32"  ]

您应该有以下数组:

[
    {
        "timestamp":"13",
        "bfx_l":"225.25",
        "bfx_h":"225.25",
        "bfx_bv":"225.62943",
        "bfx_b_s":"225.03",
        "bfx_b_l":"",
        "bfx_s_s":"",
        "bfx_s_s":"",
        "okc_bv":"224.32"
    }
]

您也可以通过JSONLint运行它,它将验证。

然后您需要做的就是对数组中的每个对象进行for循环并直接引用对象键,而不是从第一个标题行中提取键,然后将每个后续行的值映射到标题键(例如,CSV样式)。

答案 1 :(得分:0)

我过去使用的方法是使用回调函数。我并不是说这是最终的解决方案,而只是一个解决方案。

我使用的策略是:

  • 将数据文件附加到SCRIPT标记,然后
  • 调用回调函数

在该回调功能中,您可以访问该数据。这可以通过循环遍历每条记录来完成。

下面的代码会这样做:

<html>
<head>
    <script>
        function getData() {
            var src_file = 'dataset.json';
            var script = document.createElement("script");
            script.src = src_file;
            var el = (document.head || document.getElementsByTagName("head")[0]);
            el.appendChild(script);

            window.data_callback = function(results) {
                for (var i = 0; i < results.length; i++)
                    alert(results[i]);
            }
        }
    </script>
</head>
<body onload='getData()'>
</body>
</html>

我差点忘了在数据文件中提到你需要将数据数据包装在data_callback([...]);

答案 2 :(得分:0)

$.getJSON('data.json', function(json) {
                        val1 = [];
                        val2 = [];
                        val3 = [];
                        val4 = [];
                            $.each(json, function(key,value) {
                                 val1.push([Number(value[0]), Number(value[1])]);
                                 val2.push([Number(value[0]), Number(value[2])]);
                                 val3.push([Number(value[0]), Number(value[3])]);
                                 val4.push([Number(value[0]), Number(value[8])]);
                            });
                             var newvalue = [];
                             if(i == 0){
                                 newvalue = val1;
                             }
                             else if(i == 1){
                                 newvalue = val2;
                             }
                             else if(i == 2){
                                 newvalue = val3;
                             }
                             else if(i == 3){
                                 newvalue = val4;
                             }
                             seriesOptions[i] = {
                                 name: name,
                                 data: newvalue
                             };
                             seriesCounter += 1;

                             if (seriesCounter === names.length) {
                                 createChart();
                             }
                     });

这对我有用

答案 3 :(得分:-1)

您可以使用以下方法将数据映射到对象数组:

var columns = data.shift();
var results = data.map(function(row){   
   return row.reduce(function(rowObj, elem, i){
       rowObj[columns[i]] = elem;
       return rowObj;
   },{});
});

&#13;
&#13;
var data =[
  ["timestamp","bfx_l","bfx_h","bfx_bv","bfx_b_s","bfx_b_l","bfx_s_s","bfx_s_s","okc_bv"  ],
  ["0","225.25","225.25","225.63248","","","","","224.32"  ],
  ["1","225.25","225.25","225.63248","","","","","224.32"  ],
  ["2","225.25","225.25","225.63527","225.03","","","","224.32"  ],
  ["3","225.25","225.25","225.62688","225.03","","","","224.32"  ],
  ["4","225.25","225.25","225.62688","","","","","224.32"  ],
  ["5","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["6","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["7","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["8","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["9","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["10","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["11","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["12","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["13","225.25","225.25","225.62943","225.03","","","","224.32"  ],
  ["14","225.25","225.25","225.64536","224.57","","","","224.32"  ],
]

var columns = data.shift();

var results = data.map(function(row){   
   return row.reduce(function(rowObj, elem, i){
       rowObj[columns[i]] = elem;
       return rowObj;
   },{});
});

document.body.innerHTML = '<pre>' + JSON.stringify(results, null, 4) +'</pre>';
&#13;
&#13;
&#13;

相关问题