将JSON加载为array[array]

Question

我正在为我的项目运行python，以提供大量文件，其中一个是有效的SimpleHTTPWebserver "file.json“。对于我的javascript前端，我需要将它作为数组来读取，这样

{
  "val1": 101,
  "val2": 202
}

变成var jsonFile = [['val1', 101], ['val2', 202]]

不幸的是，我甚至无法将文件加载到处于原始状态的变量。我对javaScript完全陌生，但我尝试了以下几种方法：

<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
</head>
<body></body>
<script type="text/javascript">
  var mydata = JSON.parse("file.json");
</script>
</html>

但是，这会引发一个错误：

in 89:1未登录的SyntaxError: JSON中位于JSON.parse ()位置0的意外令牌:1:6

由于我刚开始接触javaScript，所以我试图尽可能地简化(不管是使用普通的javascript还是类似于JQuery之类的东西，我不在乎)，但我只是不明白为什么这不起作用。帮助!

Answer 1

您需要首先请求服务器上的文件，然后才能访问json。

如果发出ajax请求并指定json，则不需要解析数据

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
</head>

<body>
<script type="text/javascript">
  $.ajax({
    url: "path/to/json/file",
    type: 'GET',
    dataType: 'json',
    success: response => {
      console.log(Object.entries(response));
    }
  })
</script>
</body>

</html>

使用Object.entries()，您可以从对象{key:value}获得所需的结果到[[key,value]]

​

let x = {val1: 101,val2: 202};
console.log(Object.entries(x))

​

Answer 2

JSON.parse接受类似于"{"foo":"bar"}"的json对象字符串，并返回json对象，您将传递它的文件名，该文件名显然格式不正确。您必须获取该json文件的内容，并将内容提供给JSON.parse。假设您添加了jquery，您可以使用XMLHttpRequest获取该文件，该文件允许您异步获取资源(也称为ajax)。

$.ajax('/url/of/your/file.json/on/the/server', {
    success: function(content) {
        var json = JSON.parse(content);
        var resultArray = Object.keys(json)
                                .map(function(key) {
                                    return [key,json[key]];
                                })
                                .reduce(function(container,nextArray) {
                                    container.push(nextArray);
                                    return container;
                                }, []);
       consle.log(resultArray); // resultArray is what you need
    }
});

$.ajax()

JSON.parse()

Object.keys()

Array.map()

Array.reduce()