How to read json file correctly using only JavaScript

Question

I need to create HTML selectors and to get their values from JSON, I created JSON and tried to read it simply by adding one more in html document and then just parse into variable with JS, but it doesn't work, answers which I found didn't really help.

HTML:

<body>
    <form>
        <label>Select list</label>
        <select id = "Coutries">

        </select>
        <select id = "Bands">

        </select>
        <select id = "Albums">

        </select>   
    </form> 
    <script src="data.json"></script>
    <script src="script.js"></script>
</body>

JavaScript:

const data = JSON.parse(data);

score 2 · Accepted Answer · answered Jun 13 '19 at 06:41

You can't load JSON through a script element. Instead, in your script.js, you can fetch it:

fetch("data.json")
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.json();
})
.then(data => {
    // Use the data here, it's been parsed
})
.catch(error => {
    // Handle/report error here
});

score -2 · Answer 2 · edited Jun 13 '19 at 07:12

-2

Have you tried this:

$.getJSON('yourFile.json', function(data) {
    var arr= [];
      $.each( data, function( key, val ) {
    var tempArr=[key,val]
        arr.push( tempArr );
      });
    });

edited Jun 13 '19 at 07:12

Masoud Rahimi

5,785
15
39
67

answered Jun 13 '19 at 06:47

Roshini

11
3

There's no indication in the question of the user using jQuery. Neither is there any indication that they want to convert `data` into an array of arrays. – T.J. Crowder Jun 13 '19 at 07:30

How to read json file correctly using only JavaScript

2 Answers2