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, Jun 19 '17 at 00: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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). Your request would be something like `fetch("data.json") .then(response => response.json()) .then(json => console.log(json));` — Ozan, Jun 19 '17 at 00:34

score 2 · Answer 1 · answered Jun 19 '17 at 00:14

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 '17 at 00:14

Tran Ho

1,442
9
15

Is it still a json object if it is nested within an array and has the file extension of .json ? – Ozan Jun 19 '17 at 00:26
@Ozan, yes it is even the file extension is .json or anything else. I don't think file extension is important. – Tran Ho Jun 19 '17 at 00:33

score 0 · Answer 2 · answered Jun 19 '17 at 00:16

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.

score 0 · Answer 3 · answered Jun 19 '17 at 00:29

0

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

answered Jun 19 '17 at 00:29

pridegsu

1,108
1
12
27

Read json file as javascript object

3 Answers3