Read json file as javascript object

Question

I have a json file with all my data inside and I also have a search box

But i would like to add pagination to the results page

I have found this helpful code here Simple pagination in javascript which shows how it can be done, but the problem is that my data is from a file called data.json

i've tried many things to try and get my data to pull through but none seem to work

the below does not work
$.getJSON('data.json', function(data) {
    console.log('data',data);
});

this is my data

{"id":"1","name":"Name 1","channel_id":"37"},{"id":"2","name":"Name 2","channel_id":"41"},{"id":"3","name":"Name 3","channel_id":"37"},

Any help is appreciated.

Hi! More information will make it easier to diagnose the problem. You said your $.getJSON call isn't working, can you be more specific? Does anything log to the console when you try? — jack
– jack, Commented Jun 19, 2017 at 0:13
I am not sure but I have feeling that most browsers are not actually enabling local file access since you are violating the Access-Control-Allow-Origin rule. It would be better to use the Fetch. Your request would be something like fetch("data.json") .then(response => response.json()) .then(json => console.log(json)); — Ozan
– Ozan, Commented Jun 19, 2017 at 0:34

Tran Ho · Accepted Answer · 2017-06-19 00:14:29Z

2

Make sure that your Json is valid. When I checked your Json data, it is an array of objects but it is missing []. I corrected your data as below.

[{
"id": "1",
"name": "Name 1",
"channel_id": "37"
  }, {
"id": "2",
"name": "Name 2",
"channel_id": "41"
 }, {
"id": "3",
"name": "Name 3",
"channel_id": "37"
 }]

answered Jun 19, 2017 at 0:14

Tran Ho

1,50010 silver badges16 bronze badges

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

2 Comments

Ozan Over a year ago

Is it still a json object if it is nested within an array and has the file extension of .json ?

Tran Ho Over a year ago

@Ozan, yes it is even the file extension is .json or anything else. I don't think file extension is important.

v2d · Accepted Answer · 2017-06-19 00:16:30Z

The getJSON method performs a GET request to your server at the url data.json.

You are not providing any details about the location of your file and / or how your server reads and send the JSON data back to the client.

By your question, you are trying to directly read a file called data.json, which is not possible. Your server must send the JSON data back to the client by responding to the GET request at the url provided to the getJSON method.

Mati · Accepted Answer · 2017-06-19 00:29:17Z

0

the method that you are looking for is JSON.parse(jsonData)

answered Jun 19, 2017 at 0:29

Mati

1,1481 gold badge12 silver badges27 bronze badges

Collectives™ on Stack Overflow

Read json file as javascript object

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related