У меня есть файл json, и я хочу преобразовать данные в таблицу с помощью Javascript. Я нашел несколько похожих вопросов Как преобразовать следующую таблицу в JSON с помощью javascript? , цикл через объект json, но все они используют jQuery и показывают таблицу в html-сети. Мне просто нужен простой цикл для вставки строки в таблицу. Я пробовал «добавить», «вставить» и «вставить строку», все не работает. Может ли кто-нибудь дать мне подсказку?
JSON-файл:
{
"name": "lily",
"country": "china",
"age": 23
},
{
"name": "mike",
"country": "japan",
"age": 22
},
{
"name": "lucy",
"country": "korea",
"age": 25
}
Мой код:
var jdata = {};
jdata.cols = [
{
"id": "1",
"label": "name",
"type": "string"
},
{
"id": "2",
"label": "country",
"type":"string"
}
];
for(var i = 1; i < 3; i++){
row = [
{
"c": [
{
"v": json["hits"]["hits"][i]["_source"]["name"]
},
{
"v": json["hits"]["hits"][i]["_source"]["country"]
}
]
}
];
jdata.rows.insertRow(row);
}
Обновлено: добавьте ожидаемый результат: измените файл json на следующую структуру.
[
['lily', 'china'],
['mike', 'japan'],
['lucy', 'korea'],
]
Пожалуйста, объясните, что это за часть должна быть и как она относится к остальной части кода? "v": json["hits"]["hits"][i]["_source"]...
Думаю, вам нужен толкать (или конкат/push(...elements), если вы хотите добавить массив строк)
jdata.rows = [];
for(var i = 1; i < 3; i++){
row = [
{
"c": [
{
"v": json["hits"]["hits"][i]["_source"]["name"]
},
{
"v": json["hits"]["hits"][i]["_source"]["country"]
}
]
}
];
jdata.rows.push(row);
// for elements from row
// jdata.rows.push(...row)
}
Спасибо за помощь. "толчок" - хороший способ. но я получаю сообщение об ошибке «Невозможно прочитать свойство «0» неопределенного». Я неправильно понял данные массива и json?
Какая это линия? В этом коде единственное, что я вижу с числовым индексом, это json["hits"]["hits"][i]
. Попробуйте console.info(json["hits"])
и проверьте значения в консоли инспектора элемента (proly ctrl+shift+i
)
Я попробовал 'console.info(json["hits"]["hits"])', и в результате получился правильный json, который мне нужен.
Я нахожу проблему «Невозможно прочитать свойство« 0 »неопределенного». убрать одну скобку в коде: row = [ { "c":...} ] => row = {"c"...}. Теперь это работает хорошо. Спасибо еще раз.
В вашем коде есть несколько ошибок
insertRow()
— это метод из объекта Table, jdata.rows
— это не объект Table, а массив.Поскольку вы использовали insertRow()
, я переписал ваш код для отображения данных таблицы с использованием методов Table Object. Вот фрагмент кода
Редактировать: Вы можете использовать метод push()
для создания необходимой структуры JSON. Я отредактировал фрагмент кода, чтобы создать необходимый JSON.
var jdata = {
cols: [{
"id": "1",
"label": "name",
"type": "string"
},
{
"id": "2",
"label": "country",
"type": "string"
}
],
rows: []
};
var persons = [{
"name": "lily",
"country": "china",
"age": 23
},
{
"name": "mike",
"country": "japan",
"age": 22
}, {
"name": "lucy",
"country": "korea",
"age": 25
}
];
var table = document.getElementById("table");
var header = table.createTHead();
var footer = table.createTFoot();
var rowHeader = header.insertRow(0);
jdata.cols.forEach((col, index) => {
var cell = rowHeader.insertCell(index);
cell.innerHTML = col.label;
});
persons.forEach((person, index) => {
var rowFooter = footer.insertRow(index);
rowFooter.insertCell(0).innerHTML = person.name;
rowFooter.insertCell(1).innerHTML = person.country;
jdata.rows.push([person.name, person.country]);
});
console.info(jdata.rows);
<table id = "table">
</table>
Спасибо за четкий комментарий! но я не хочу, чтобы таблица показывалась в Интернете. Я хочу перенести файл json в новую структуру (отредактировано).
@landy Я отредактировал свой ответ, включив в него вашу новую структуру JSON.
вы всегда можете преобразовать json в обычный массив, затем добавить нужные данные, а затем преобразовать их обратно в json