JSON Data Not Displaying Correctly in HTML

Question

I Have a Simple JSON File With Data and I want to display that data in HTML website following is the JSON file :

[
    {
        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%)'
    }
]

Following is My HTML and Javascript File:

<!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>

When i run this Following piece of code it doesnt show me the expected results:

How Can I Display The JSON Data Correctly?

"doesn't show expected result" - describe the expected result. Notice that only first object in your json array has Indice_Name field. — Omkar76
– Omkar76, Commented Mar 26, 2021 at 16:43
Your JSON doe not look correct. You also have change and change% in your JSON but you only query change.. — mkane
– mkane, Commented Mar 26, 2021 at 16:46

Kurt · Accepted Answer · 2021-03-26 16:46:10Z

1

Your JSON structure is not how it should be. If the first object is how it should be (judging by the fact that they are displayed correctly), the others should have the same property names.

In fact, the other objects (except the first one) all have a property called 'Indice_Name Name' but it should be 'Indice_Name'. They also have another property called "change%" when it should be "change" to match the first object.

You need to change the JSON file to this (the rest should follow the same structure):

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

answered Mar 26, 2021 at 16:46

Kurt

3064 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anush Kamble Over a year ago

Thank You For Your Answer.I Have Now Changed the JSON file and now it works.This just happened because of copy/pasting.

Ezequiel S. Sandoval · Accepted Answer · 2021-03-26 17:02:46Z

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>

Anush Kamble · Accepted Answer · 2021-03-29 05:04:32Z

I am now able to solve my problem,After looking at many answers on this question.Essentially the problem was that the keys of the JSON file were wrong and not similar to the first key of JSON file.After i fixed the JSON file the code started working properly.Hope this will help someone in future.

Correct JSON File:

[
    {
        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%)'
    }
]

Collectives™ on Stack Overflow

JSON Data Not Displaying Correctly in HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related