Заполнение списка (а не HTML) от JSON

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-файла со следующей структурой:

[ 
    { 
     "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 не интерпретирует список: wordCloudGWT, поскольку я (ошибочно) думаю, что это должно быть.

Если я BruteForce создание списка таким образом

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/

Answer 2

Похоже, что wordcloud2.js библиотека ожидает, что значение частоты должен быть строкой, и что это не так ваших данных json. Так что улучшите свой собственный пример кода; добавьте toString() в конце переменной Freq при нажатии значений. Пример:

list : [ 
    [data[0].wordCloud, data[0].Freq.toString()], 
    [data[1].wordCloud, data[1].Freq.toString()], 
    ... 
]