从JSON填充列表(而不是HTML）

Populate a list (not HTML) from JSON

本文关键字：HTML JSON 填充 列表      更新时间：2023-09-26

我正在尝试使用wordcloud2.js生成一些单词cloud。使用给定的示例，它可以很好地工作：

var options = 
{
  list : [ 
  ["Pear", "9"],
  ["Grape", "3"],
  ["Pineapple", "8"], 
  ["Apple", "5"]
  ],
  gridSize: Math.round(16 * document.getElementById('canvas_cloud').offsetWidth / 1024),
  weightFactor: function (size) {
    return Math.pow(size, 1.9) * document.getElementById('canvas_cloud').offsetWidth / 1024;
  }
}
WordCloud(document.getElementById('canvas_cloud'), options);

然而，我很难用具有以下结构的JSON文件中的数据填充"list:"：

[
    {
        "wordCloud": "Manchester",
        "Freq": 2321
    },
    {
        "wordCloud": "Munich",
        "Freq": 566
    },
    {
        ...
    },
    {
        "wordCloud": "Madrid",
        "Freq": 6
    }
]

我知道这是因为我对将值推送到数组的知识有限。到目前为止，我的尝试是：

$.getJSON('json/wordCloudGWT-' + site + '.json', function (data) {

      var wordCloudGWT = [];                
        for (var i=0;i<100;i++) {
    wordCloudGWT.push([data[i].wordCloud, data[i].Freq]);
    };

      console.log(wordCloudGWT);
var options = 
{
  list : wordCloudGWT,
  gridSize: Math.round(16 * document.getElementById('canvas_cloud').offsetWidth / 1024),
  weightFactor: function (size) {
    return Math.pow(size, 1.9) * document.getElementById('canvas_cloud').offsetWidth / 1024;
  }
}
WordCloud(document.getElementById('canvas_cloud'), options);

console.log（wordCloudGWT）；显示了一个包含100个（对象？）的数组，每个数组的长度为2，但wordcloud没有显示。我在浏览器控制台中看到一个错误，我认为这是因为wordcloud2.js没有按照我（错误地）认为的那样解释列表：wordCloudGWT

如果我以这种方式创建列表，

  list : [ 
  [data[0].wordCloud, "9"],
  [data[1].wordCloud, "3"],
  [data[2].wordCloud, "8"], 
  [data[3].wordCloud, "5"]
  ],

单词显示正确，但这种方法有两个问题：

  • 不考虑单词的实际频率（单词大小）
  • 通过手动添加100行代码，肯定有更优雅的方法来生成列表

对于第一点，我认为我可以通过以下方式手动编辑列表来解决问题：

  list : [ 
  [data[0].wordCloud, data[0].Freq],
  [data[1].wordCloud, data[1].Freq],
  [data[2].wordCloud, data[2].Freq], 
  [data[3].wordCloud, data[3].Freq]
  ],

然而，这样做的结果与我第一次尝试时出现的JS错误相同。

有什么线索可以帮助我克服困难吗？

您可以使用Array.map来格式化数据：

var formattedList = responseData.map(function(item) {
    return [item.wordCloud, item.Freq]
});

演示：http://jsfiddle.net/64v75enq/

看起来wordcloud2.js库希望频率值是一个字符串，而json数据的情况并非如此。因此，改进您自己的示例代码；在Freq变量的末尾添加一个toString（）。像这样：

list : [ 
    [data[0].wordCloud, data[0].Freq.toString()],
    [data[1].wordCloud, data[1].Freq.toString()],
    ...
]
相关文章：