can't get data from external local json

Question

I'm trying to show an 'alert' box with text from JSON file in it. But it seems like I can't get data from my JSON file. It just doesn't throw an alert box.

var thebook = JSON.parse(book);

function showAlert() {
  alert(thebook[0].word);
}

<head>
  <script type="text/javascript" src="book.json"></script>
</head>

<body>
  <button onclick="showAlert()">show alert</button>
</body>

And an example JSON file

[
  {
    "word" : "cuiller",
    "page" : 23
  },
  
  {
    "word" : "arbre ",
    "page" : 245
  }
]

Seems like you try to load json in a wrong way. Have a look at this: https://stackoverflow.com/questions/13515141/html-javascript-how-to-access-json-data-loaded-in-a-script-tag-with-src-set — treecon, Jul 12 '18 at 08:57

score 1 · Answer 1 · edited Jul 12 '18 at 09:22

1

you need to request the resource from inside your JS code not just reference it you can do this via a XMLHttpRequest which wiill return the text from the file, you can then parse the text into an object using JSON.parse

An example would look like this

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

https://www.w3schools.com/js/js_json_parse.asp

edited Jul 12 '18 at 09:22

MikeT

5,398
3
27
43

answered Jul 12 '18 at 09:01

Lasharela

1,307
1
11
23

How it's suppose to answer OP question ? – executable Jul 12 '18 at 09:02
@executable it answer the question exactly as asked,though i admit the language could be clearer – MikeT Jul 12 '18 at 09:26

David R · Answer 2 · 2018-07-12T09:18:20.397

1

In your book.json Have your JSON stored in a variable (like var book given below).

var book = [
  {
    "word" : "cuiller",
    "page" : 23
  },

  {
    "word" : "arbre ",
    "page" : 245
  }
];

Stringify it before parsing/alerting it.

thebook = JSON.parse(JSON.stringify(book));

function showAlert() {
  alert(thebook[0].word);
}

Working JSFiddle link: https://jsfiddle.net/h5knqobs/9/

Hope this helps!

edited Jul 12 '18 at 09:18

answered Jul 12 '18 at 09:04

David R

14,711
7
54
72

aren't OP want to retrieve json from file? – david Jul 12 '18 at 09:09
@david Thanks for pointing it out.. Corrected my code, Check edited code above – David R Jul 12 '18 at 09:18
converting the json file to a js file works but doesn't deem to be in the spirit of what they are trying to do – MikeT Jul 12 '18 at 09:35
I agree with you @MikeT, But it was the requirement of OP, Hence opted that way. :-) – David R Jul 12 '18 at 09:36

david · Answer 3 · 2018-07-12T09:58:23.230

1

Here is how you retrieve JSON from file

var book = (function() {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "/book.json",
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
})();

After you store the JSON value into a variable, parse it like this.

var thebook = JSON.parse(JSON.stringify(book));

EDIT

Here is the better version of my answer

var book = null;
$.ajax({
    'async': false,
    'global': false,
    'url': "/test.json",
    'dataType': "json",
    'success': function (data) {
        book = data;
    }
});

In your showAlert function, you can simply call book[0].word.

edited Jul 12 '18 at 09:58

answered Jul 12 '18 at 09:11

david

3,225
9
30
43

why would you need to convert the js object to json and then parse it back again? just set the book directly with the data object as you have disabled async its not like the promise will not have returned – MikeT Jul 12 '18 at 09:44
the OP said that the OP trying to get data from JSON file, not the JSON directly from JS code. – david Jul 12 '18 at 09:47
i think you miss my point, your success callback has already parsed the json into a js object as your specified a json datatype so where you do `json = data` you are setting json to a js object so `var thebook = JSON.parse(JSON.stringify(book));` could be replaced with `var thebook = data` – MikeT Jul 12 '18 at 09:52
Thanks @MikeT for finding more efficient way. – david Jul 12 '18 at 09:58

can't get data from external local json

3 Answers3