Question

我正在为我的项目运行python SimpleHTTPWebserver来提供一堆文件，其中一个是有效的JSON“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>

然而，这会引发错误：

VM89：1未捕获的SyntaxError：位于0的JSON中的意外标记在JSON.parse（） at：1：6

由于我是javaScript的新手，我试图让事情变得尽可能简单（无论是使用普通的javascript还是类似JQuery的东西我都不在乎）但是却无法理解为什么这不起作用。帮助！

Answer 1

private static final int MEGABYTE = 1024 * 1024; public static void downloadFile(String fileUrl, File directory){ try { URL url = new URL(fileUrl); HttpURLConnection urlConnection = (HttpURLConnection)url.openConnection(); //urlConnection.setRequestMethod("GET"); //urlConnection.setDoOutput(true); urlConnection.connect(); InputStream inputStream = urlConnection.getInputStream(); FileOutputStream fileOutputStream = new FileOutputStream(directory); int totalSize = urlConnection.getContentLength(); byte[] buffer = new byte[MEGABYTE]; int bufferLength = 0; while((bufferLength = inputStream.read(buffer))>0 ){ fileOutputStream.write(buffer, 0, bufferLength); } fileOutputStream.close(); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } }接受一个像JSON.parse这样的json对象字符串并返回一个json对象，你传递的文件名显然是格式错误的。您必须获取该json文件的内容并将内容提供给"{"foo":"bar"}"。假设您已添加了jquery，您可以使用JSON.parse获取该文件，这允许您异步获取资源（也称为ajax）。

XMLHttpRequest

Answer 2

您需要首先请求服务器上的文件，然后才能访问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))

将JSON加载为数组[array]

2 个答案: