Получить JSON в таблицу HTML JavaScript
Я создал новую категорию в качестве таблицы списка основных таблиц. вопрос заключается в том, как вставить эти данные JSON в HTML-таблицу JavaScript в следующем формате:
{
query: {
count: 10,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
test1: {
count: 16,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
bold: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
home: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
.....
}
Вот такая таблица:
| Name | Count | Time | Language | Diag |
-------------------------------------------------------------
| query | 10 | 2015-12-09T17:12:09Z | en-US | 2 |
| test1 | 16 | 2015-12-09T17:12:09Z | en-US | 2 | .....
Вам нужно будет сгенерировать HTML на основе json. Это потребует перебора записей объектов json и создания html-элементов или разметки. Не существует волшебной функции, которая преобразует json в html-таблицу.
в этом случае мне нужен код javascript, который может определять данные json в таблицу html. так про то что я описал выше
@borneo "в этом случае мне нужен код javascript", SO требует минимальный воспроизводимый пример, который включает JavaScript. Ожидается, что сам JavaScript не будет работать, на самом деле ожидается не работать. Тем не менее ожидается, что в противном случае OP (т.е. вы) будет выглядеть как кто-то, кто просто требует, чтобы работа была сделана за вас.
извините, хорошо, я понимаю, о чем вы говорите, кроме того, я продолжаю копать с нескольких сайтов. пока нашел только у третьих лиц из ZingGrid exmple xxx.js
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Что-то в этом роде?
Это создаст html-разметку на основе данных JSON. Затем запишите это в документ.
var data = {
query: {
count: 10,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
},
test1: {
count: 16,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
},
bold: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
},
home: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
}
};
let htmlStr = "<table><tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>";
const keys = Object.keys(data);
for (var key of keys) {
let item = data[key];
htmlStr += `<tr><td>${key}</td><td>${item.count}</td><td>${item.created}</td><td>${item.lang}</td></tr>`;
}
htmlStr += "</table>";
document.write(htmlStr);table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}эта работа для меня .. кстати, как насчет var data заменить как URL (ajax)
Во-первых, вам нужно создать <table> в HTML, применить к нему некоторые стили (см. пример ниже, вы можете запустить его)
Затем запустите цикл для набора данных и добавьте строки в таблицу.
Use string literals to replace data from you variable to rowHTML, or you can use any templating library to create a html template for cleaner code.
var myData = {
query: {
count: 10,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
},
test1: {
count: 16,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
},
bold: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
},
home: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
}
};
var myDataKeys = Object.keys(myData);
var myTable = document.getElementById("myTable");
for(var i=0; i<myDataKeys.length; i++) {
const rowData = myData[myDataKeys[i]];
const rowHTML = `<tr><td>${myDataKeys[i]}</td><td>${rowData.count}</td><td>${rowData.created}</td><td>${rowData.lang}</td>`;
myTable.innerHTML += rowHTML;
}table, th, td {
border: 1px solid black;
}<table id = "myTable">
<tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>
</table>Вот краткий пример, который может помочь вам понять принцип, а затем настроить его в соответствии с вашими потребностями.
const source = {
query: {
count: 10,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
},
test1: {
count: 16,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
},
bold: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
},
home: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
}
}
const keys = Object.keys(source); // get the names properly
const colNames = Object.keys(source[keys[0]]); // get all column names
// Let's form table and header first
const table = document.createElement('table');
const header = document.createElement('tr');
header.innerHTML = `<th>name</th>`
header.innerHTML += colNames.map(name => `<th>${name}</th>`).join('');
table.appendChild(header);
// Now lets append all the rows
const rows = keys.map((key) => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${key}</td>`
tr.innerHTML += colNames.map(name => `<td>${source[key][name]}</td>`).join('');
return tr;
});
rows.forEach(r => table.appendChild(r));
// render
document.body.appendChild(table);td, th {
width: 120px;
border: 1px solid black;
}как насчет того, чтобы const source заменить на URL?
Вы запускали фрагмент? Что именно не работает?
как насчет того, если const source я заменю URL-адресом? экзамен от zpool.ca/api/currencies
Попробуйте использовать fetch() для получения данных из URL. После этого просто используйте приведенный выше код с полученными данными.
я пытаюсь function getData() { $.ajax({ url: 'https://www.zpool.ca/api/currencies', success: function() {} }) } var data = getData; но не работает
@ Зак. я тестирую, но не работает.
$.ajax({
url: 'https://www.zpool.ca/api/currencies',
success: function(data) {
let htmlStr = "<table><tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>";
const keys = Object.keys(data)
for (var key of keys) {
let item = data[key];
htmlStr += `<tr><td>${key}</td><td>${item.algo}</td><td>${item.port}</td><td>${item.name}</td></tr>`;
}
htmlStr += "</table>";
document.write(htmlStr);
}
});
Вы уже пробовали кодировать это?