CODEWITHSUNDEEP
javascripthtmlcssjson
Anush Kamble
Anush Kamble

Reputation: 51

JSON Data Not Displaying Correctly in HTML

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: The Preview Of The HTML Website

How Can I Display The JSON Data Correctly?

Upvotes: 1

Views: 1442

Answers (3)

Anush Kamble
Anush Kamble

Reputation: 51

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

Upvotes: 0

Ezequiel S. Sandoval
Ezequiel S. Sandoval

Reputation: 170

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>

Upvotes: 1

Kurt
Kurt

Reputation: 306

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%)"
},
.
.
.
]

Upvotes: 1

Related Questions