JSON 数据在 HTML 中未正确显示答案

【问题标题】：JSON Data Not Displaying Correctly in HTMLJSON 数据在 HTML 中未正确显示
【发布时间】：2021-06-23 12:25:10
【问题描述】：

我有一个包含数据的简单 JSON 文件，我想在 HTML 网站中显示该数据，以下是 JSON 文件：

[
    {
        Indice_Name: 'Nasdaq',
        price: '13,017.79',
        change: '+40.12 (+0.31%)'
    },
    {
        'Indice_Name Name': 'FTSE',
        price: '6,729.69',
        'change%': '+54.86 (+0.82%)'
    },
    {
        'Indice_Name Name': 'Dow_Jones',
        price: '32,787.33',
        'change%': '+167.85 (+0.51%)'
    },
    {
        'Indice_Name Name': 'SGX_Nifty',
        price: '9.91',
        'change%': '-0.02 (-0.20%)'
    },
    {
        'Indice_Name Name': 'Nikkei_225',
        price: '29,176.70',
        'change%': '+446.82 (+1.56%)'
    }
]

以下是我的 HTML 和 Javascript 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="World_Indice_DataDiv"></div>
    <script>
        fetch('http://127.0.0.1:5500/data/World_Indices_Display.json')
        .then(function (response) {
        return response.json();
        })
        .then(function (data) {
        appendData(data);
        })
        .catch(function (err) {
        console.log(err);
        });


        function appendData(data) {
        var mainContainer = document.getElementById("World_Indice_DataDiv");
        for (var i = 0; i < data.length; i++) {
            var div = document.createElement("div");
            div.innerHTML = 'Indice Name: ' + data[i].Indice_Name + '\n' + 'Price : ' + data[i].price + '\n' + data[i].change;
            mainContainer.appendChild(div);
        }
        }

    </script>
</body>
</html>

当我运行以下这段代码时，它没有向我显示预期的结果：

如何正确显示 JSON 数据？

【问题讨论】：

“不显示预期结果” - 描述预期结果。请注意，只有 json 数组中的第一个对象具有 Indice_Name 字段。
您的 JSON 看起来不正确。您的 JSON 中也有 change 和 change% ，但您只查询 change ..

标签： javascript html css json

【解决方案1】：

我现在能够解决我的问题，在查看了这个问题的许多答案之后。基本上问题是 JSON 文件的键是错误的，并且与 JSON 文件的第一个键不相似。在我修复了 JSON 之后文件代码开始正常工作。希望这对将来的人有所帮助。

正确的 JSON 文件：

[
    {
        Indice_Name: 'Nasdaq',
        'price': '13,017.79',
        'change': '+40.12 (+0.31%)'
    },
    {
        'Indice_Name': 'FTSE',
        'price': '6,729.69',
        'change': '+54.86 (+0.82%)'
    },
    {
        'Indice_Name Name': 'Dow_Jones',
        'price': '32,787.33',
        'change': '+167.85 (+0.51%)'
    },
    {
        'Indice_Name': 'SGX_Nifty',
        'price': '9.91',
        'change': '-0.02 (-0.20%)'
    },
    {
        'Indice_Name': 'Nikkei_225',
        'price': '29,176.70',
        'change': '+446.82 (+1.56%)'
    }
]

【讨论】：

【解决方案2】：

如果您检查第一项有键 Indice_Name 而其余的是 Indice_Name Name，则您的 json 数组存在一个问题，因此如果这是您的响应，您可以这样处理：

const arr = [
  {
  "Indice_Name": "Nasdaq", // <--- here's one of your problems with response
  "price": "13,017.79",
  "change": "+40.12 (+0.31%)"
  },
  {
  "Indice_Name Name": "FTSE", // <--- and here, idk why you receive these
  "price": "6,729.69",
  "change%": "+54.86 (+0.82%)" // <--- you can access these keys with
                               // brackets operator obj['key'] in this
                               // case you must write item['change%']
                               // to get value. Not recommended 2 have
                               // such weird names as keys!
  },
  {
  "Indice_Name Name": "Dow_Jones",
  "price": "32,787.33",
  "change%": "+167.85 (+0.51%)"
  },
  {
  "Indice_Name Name": "SGX_Nifty",
  "price": "9.91",
  "change%": "-0.02 (-0.20%)"
  },
  {
  "Indice_Name Name": "Nikkei_225",
  "price": "29,176.70",
  "change%": "+446.82 (+1.56%)"
  }
];
const div = document.getElementById('inner');

arr.forEach(item => {
  // you can use backticks to make it easier
  // since you're innering html you can use html tags to help you when
  // displaying data!
  div.innerHTML = `${div.innerHTML}
                   <p>Indice Name: ${item['Indice_Name'] || item['Indice_Name Name']}
                   <p>Price:       ${item.price}</p>
                   <p>Change:      ${item['change%']}</p>
                   <br>`
});

&lt;div id="inner"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

您的 JSON 结构不是应有的样子。如果第一个对象是它应该的样子（从它们正确显示的事实来看），那么其他对象应该具有相同的属性名称。

事实上，其他对象（除了第一个对象）都有一个名为“Indice_Name Name”的属性，但它应该是“Indice_Name”。当它应该是“更改”以匹配第一个对象时，它们还有另一个称为“更改％”的属性。

你需要把 JSON 文件改成这样（其余的应该遵循相同的结构）：

[
{
"Indice_Name": "Nasdaq",
"price": "13,017.79",
"change": "+40.12 (+0.31%)"
},
{
"Indice_Name": "FTSE",
"price": "6,729.69",
"change": "+54.86 (+0.82%)"
},
.
.
.
]

【讨论】：

感谢您的回答。我现在更改了 JSON 文件，现在它可以工作了。这只是因为复制/粘贴而发生的。