时间戳

首页 > 解决方案 > JSON 数据在 HTML 中未正确显示

javascript - JSON 数据在 HTML 中未正确显示

问题描述

我有一个带有数据的简单 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>

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

如何正确显示 JSON 数据？

标签： javascripthtmlcssjson

解决方案

There's one issue with your json array if you check the first item has by key Indice_Name and the rest are Indice_Name Name, so if this is your response you can handle it like this:

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>`
});
<div id="inner"></div>

推荐阅读