How to read json file correctly using only JavaScript [duplicate]

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);

T.J. Crowder · Accepted Answer · 2019-06-13 06:41:16Z

2

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
});

answered Jun 13, 2019 at 6:41

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Masoud Rahimi · Accepted Answer · 2019-06-13 07:12:28Z

-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, 2019 at 7:12

Masoud Rahimi

6,08916 gold badges44 silver badges71 bronze badges

answered Jun 13, 2019 at 6:47

Roshini

811 gold badge1 silver badge4 bronze badges

1 Comment

T.J. Crowder Over a year ago

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.

Collectives™ on Stack Overflow

How to read json file correctly using only JavaScript [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related