Unable to use JSON data after pushing into array with Javascript .push Method

Question

I am not able to retrieve the values from an array after storing it in a variable outside of getJSON.

My JSON response is:

[
    {
        "Book_ID": "1",
        "Book_Name": "Computer Architecture",
        "Category": "Computers",
        "Price": "125.60"
    },
    {
        "Book_ID": "2",
        "Book_Name": "Asp.Net 4 Blue Book",
        "Category": "Programming",
        "Price": "56.00"
    },
    {
        "Book_ID": "3",
        "Book_Name": "Popular Science",
        "Category": "Science",
        "Price": "210.40"
    }
]

Using the jQuery $.getJson function:

  var booksList = [];
  $.getJSON( "books.json", function( data ) {
    $.each(data, function (index, value) {
     booksList.push(value);
    });
  });

When I try to get the BOOK ID,

console.log(booksList[0].BOOK_ID);

I get the following error:

Uncaught TypeError: Cannot read property 'Book_ID' of undefined

But when I log the complete array,

console.log(booksList);

I see this response in the console:

show the code where you are doing `console.log(booksList[0].BOOK_ID);` — brk, Mar 11 '19 at 03:56
You are probably accessing `console.log(booksList[0].BOOK_ID);` outside `getJSON` callback. — adiga, Mar 11 '19 at 04:11
Notice how the two outputs are different `[]` vs `(3) [{...}, {...}, {...}]`. Also notice the blue box with the `i`. The console shows you the value at the moment you expand the details, not when the value was actually logged. At that moment the response has been received. — Felix Kling, Mar 11 '19 at 21:14
@NegiRox Please see the attached file console.log(data). I need to access the data outside of getJSON. — Ahmed Ali Khawaja, Mar 11 '19 at 21:14
@FelixKling Yes that is the case. How do I access the data of getJSON outside of the its function ? — Ahmed Ali Khawaja, Mar 11 '19 at 21:16
You can pass the data as argument to another function: `$.getJSON(..., function() { ... doSomething(booksList); })`. See the duplicate. — Felix Kling, Mar 11 '19 at 21:24
It requires aysnc:false which is only possible with the full version of $.ajax function. @FelixKling yes I tried that tooit works but I need to use the data in multiple functions — Ahmed Ali Khawaja, Mar 11 '19 at 21:24
This works, but is the worst solution. Learn about asynchronous execution flows in JavaScript, because they are everywhere (e.g. event handlers). — Felix Kling, Mar 11 '19 at 21:25
you can directly assign bookList=data; and you will be able to access it outside — Negi Rox, Mar 12 '19 at 03:18

score 0 · Answer 1 · answered Mar 11 '19 at 05:22

var booksList = [];
$.getJSON( "books.json", function( data ) {
  $.each(data, function (index, value) {
   booksList.push(value);
  });
});

$.getJSON() returns immediately and $.each() also returns immediately, while the code inside the function is still executing in a separate thread. The code after that executes immediately and so the list isnt updated when you try to get data from it and its empty thus there is an error

var booksList = [];
$.getJSON( "books.json", function( data ) {
  $.each(data, function (index, value) {
   booksList.push(value);
   console.log(booksList[0].Book_ID);
  });
});
console.log("hi");

will show the updated list while "hi" gets printed first.

Unable to use JSON data after pushing into array with Javascript .push Method

1 Answers1