如何从 JSON 数据中获取一种值类型并显示在列表中？

Question

首先表示歉意，因为我对从 API 中获取信息还很陌生，我正在努力学习。

我需要从 "result" 对象中获取 "number" 的所有实例，并以无序列表或分隔符显示（参见下面的示例 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 class="heading">${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>

Answer 1

编辑（基于评论）：看来您要获取 REST 端点，因此您不能仅获取部分响应（与 graphQL 相对），因此您所能做的就是选择性地 include/exclude 您需要的数据。我更新了代码以反映这一点。

代码很好，但您应该始终尝试使用尽可能接近真实数据的数据对您的应用进行编码。使用与您最终使用的形状不同的数据源总是会带来错误和代码更改。

我更新了您的示例以使用您提供的数据，而不是从您使用的 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 class="heading">${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>

如何从 JSON 数据中获取一种值类型并显示在列表中？

How can I fetch one value type from the JSON data and display in a list?

javascript

json

fetch-api