javascript - 从 JSON 填充列表(不是 HTML)

Question

我正在尝试使用wordcloud2.js生成一些词云。使用给出的示例效果很好:

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 的数组，但字云未显示。我在浏览器的控制台中看到一个错误，我认为这是因为 wordcloud2.js 没有像我(错误地)认为应该那样解释 list : 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 错误。

有什么提示可以帮助我克服困难吗？

Answer 1

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

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

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