首先很抱歉，因為我對從 API 獲取還很陌生，而且我正在努力學習。
我需要"number"從"result"物件中獲取所有實體并以無序串列或分隔符顯示（請參閱下面的示例 JSON 結果）
{
"code": "200",
"drawdate": "1 ?????? 2564",
"result": [
{
"id": "lotto_one",
"name": "????????? 1",
"reword": 6000000,
"amount": 1,
"number": "835538"
},
{
"id": "lotto_first_three",
"name": "??????? 3 ???",
"reword": 4000,
"amount": 2,
"number": [
"290",
"838"
]
},
{
"id": "lotto_last_three",
"name": "??????? 3 ???",
"reword": 4000,
"amount": 2,
"number": [
"051",
"806"
]
},
{
"id": "lotto_last_two",
"name": "??????? 2 ???",
"reword": 2000,
"amount": 1,
"number": "73"
},
{
"id": "lotto_side_one",
"name": "???????????????????????? 1",
"reword": 2000,
"amount": 1,
"number": [
"835537",
"835539"
]
},
{
"id": "lotto_two",
"name": "????????? 2",
"reword": 200000,
"amount": 5,
"number": [
"316827",
"731177",
"743731",
"788652",
"923096"
]
},
我使用各種教程整理了一個使用chucknorris api的示例，但它顯示了所有資料和類別。
如何僅在帶有分隔符的串列中捕獲和顯示所有結果值，例如：
123456 | 012345 | 097749 | 039249等
const output = document.querySelector('.output');
fetch('https://api.chucknorris.io/jokes/random', {
headers: {
"Content-Type": "application/json",
"x-api-key": "pass",
},
})
.then(response => response.json())
.then(updateHTML);
function updateHTML(data) {
// Get the object entries - and array of key/value pairs
const entries = Object.entries(data);
// Iterate over the entries and return a new array
// of strings created from the key/value using a
// template string.
const rows = entries.map(([key, value]) => {
return `
<tr>
<td >${key}</td>
<td>${value}</td>
</tr>
`;
});
// Create a new HTML string by `join`ing up the row array
// and adding it to a new string
const html = `<table><tbody>${rows.join('')}</tbody></table>`;
// Insert the HTML into the page
output.insertAdjacentHTML('beforeend', html);
}<div class="output"></div>uj5u.com熱心網友回復：
編輯（基于評論）：看來您要獲取 REST 端點，因此您不能僅獲取回應的一部分（與 graphQL 相對），因此您所能做的就是選擇性地包含/排除您需要的資料。我更新了代碼以反映這一點。
代碼很好，但您應該始終嘗試使用盡可能接近真實資料的資料來撰寫您的應用程式。使用與最終使用的形狀不同的資料源總是會帶來錯誤和代碼更改。
我更新了您的示例以使用您提供的資料，而不是從您正在使用的 API 中獲取資料。看看updateHTML()方法中的嵌套回圈。
const src = {
"code": "200",
"drawdate": "1 ?????? 2564",
"result": [
{
"id": "lotto_one",
"name": "????????? 1",
"reword": 6000000,
"amount": 1,
"number": "835538"
},
{
"id": "lotto_first_three",
"name": "??????? 3 ???",
"reword": 4000,
"amount": 2,
"number": [
"290",
"838"
]
},
{
"id": "lotto_last_three",
"name": "??????? 3 ???",
"reword": 4000,
"amount": 2,
"number": [
"051",
"806"
]
},
{
"id": "lotto_last_two",
"name": "??????? 2 ???",
"reword": 2000,
"amount": 1,
"number": "73"
},
{
"id": "lotto_side_one",
"name": "???????????????????????? 1",
"reword": 2000,
"amount": 1,
"number": [
"835537",
"835539"
]
},
{
"id": "lotto_two",
"name": "????????? 2",
"reword": 200000,
"amount": 5,
"number": [
"316827",
"731177",
"743731",
"788652",
"923096"
]
},
]
};
const output = document.querySelector('.output');
/*
// Use local data instead
fetch('https://api.chucknorris.io/jokes/random', {
headers: {
"Content-Type": "application/json",
"x-api-key": "pass",
},
})
.then(response => response.json())
.then(updateHTML);
*/
function updateHTML(data) {
// Get the object entries - and array of key/value pairs
const entries = Object.entries(data);
// Iterate over the entries and return a new array
// of strings created from the key/value using a
// template string.
const rows = data.map((entry) => {
return Object.keys(entry).map((key) => {
let value = entry[key];
if (key === 'number') {
if (Array.isArray(value)) {
value = value.join(' | ');
}
return `
<tr>
<td >${key}</td>
<td>${value}</td>
</tr>
`;
}
}).join('');
});
// Create a new HTML string by `join`ing up the row array
// and adding it to a new string
const html = `<table><tbody>${rows.join('')}</tbody></table>`;
// Insert the HTML into the page
output.insertAdjacentHTML('beforeend', html);
}
updateHTML(src.result);<div class="output"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448559.html
標籤：javascript json 拿来