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

时间:2015-02-20 13:22:22

标签: javascript json processing.js

我正在尝试访问项目文件夹中内部数据文件夹中的json数据。但我得到“Uncaught Processing.js:无法执行pjs sketch:ReferenceError:loadJSONArray未定义”错误。

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);
}
}

2 个答案:

答案 0 :(得分:1)

如果您能够安装jQuery,则可以轻松调用$.ajax({})或更具体的$.getJson({})等方法,以便您可以使用$.each循环搜索结果。< / p>

jQuery API文档中给出的示例:

$.getJSON( "data/data.json", function( data ) {

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

});

<强>更新

以下是一个快速JsFiddle,展示了如何使用$.each()

答案 1 :(得分:0)

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

您可以简单地在普通JS上下文中加载值,然后将它们提供给草图(在http://processingjs.org/articles/PomaxGuide.html之后等)