如何在processing.js中访问json数据

how to access json data in processing.js

本文关键字：访问 json 数据 js processing      更新时间：2024-02-18

我正在尝试访问json数据，该数据位于我的项目文件夹中的数据文件夹中。但我得到了"Uncaught Processing.js:无法执行pjs sketch:ReferenceError:loadJSONArray is not defined"错误。

JSON数据如下：

[
    {
       "month": "january", 
       "total": 32393, 
       "disease": 2761, 
       "wounds": 83, 
       "other": 324
    },
    {
       "month": "february", 
       "total": 30919, 
       "disease": 2120, 
       "wounds":  42, 
       "other": 361
    }
]

这是我的HTML文件，我使用的是1.3.6版本的处理程序。

<html>
<head>
    <script src="processing-1.3.6.js"></script>
</head>
<body>
    <canvas data-processing-sources="demo.pde"></canvas>    
</body>
</html>

以下是我的处理代码。（demo.pde）

JSONArray values;
void setup() {
size(800,600);
background(255);
noLoop();
values = loadJSONArray("data/data.json");
for (int i = 0; i < values.size(); i++) {
    JSONObject deads = values.getJSONObject(i); 
    int total = deads.getInt("total");
    String month = deads.getString("month");
    println(total + ", " + month);
}
}

如果您能够安装jQuery，您可以轻松地调用$.ajax({})或更具体地说$.getJson({})等方法，从而可以使用$.each循环显示结果。

jQuery API文档中给出的示例：

$.getJSON( "data/data.json", function( data ) {
  $.each( data, function( key, val ) {
   // YOUR CODE
   // example: 
   var result = val.total + ' ' + val.month;
  });
});

更新：

这里有一个JsFiddle，展示了如何使用$.each()

Processing.js还不支持loadJSONArray，而且所有数据请求在JavaScript中都是异步的，因此loadJSONArray不能像Processing API现在让它工作的那样工作。

您可以简单地在纯JS上下文中加载值，然后将它们输入到草图中（如下http://processingjs.org/articles/PomaxGuide.html或类似物）

相关文章：