Extracting JSON data into Javascript object array

Question

I have a JSON file with dummy articles in it for testing purposes. I'm trying to extract the information from the JSON file using jQuery to create an array of objects using the pulled information.

Here's my JSON file:

{
    "news": [
        {
            "title": "Test 1",
            "author": "Chicago Tribune",
            "source": "http://www.chicagotribune.com/",
            "preview": "Long-simmering . . .",
            "picture": "IMG" 
        },
        {
            "title": "Test 2",
            "author": "New York Times",
            "source": "http://www.nytimes.com/",
            "preview": "Information . . .",
            "picture": "IMG" 
        },
        {
            "title": "Test 3",
            "author": "Chicago Tribune",
            "source": "http://www.chicagotribune.com/",
            "preview": "Blah blah blah . . .",
            "picture": "IMG" 
        }
    ]
}

Here's my Javascript file:

// Article array
var articles = [];

// Article 'class'
function Article (title, author, preview, picture) {
    this.title = title;
    this.author = author;
    this.preview = preview;
    this.picture = picture
}

// Pull data from JSON file
$.getJSON('data.json', function(data) {
    $.each(data.news, function (i, j) {
        articles.push(new Article(j.title, j.author, j.preview, j.picture));
    });
});

for (i = 0; i < articles.length; i++) {
    Console.log('Article ' + i + ": " + articles[i].title);
}

The articles array is not filling up and there doesn't seem to be any objects created. My next step would be iterating through each file in the array and posting that data to a page using the newly-filled array of articles.

Perhaps `articles` *does* fills up, but you're looping over it before the asynchronous Ajax call had the chance to fill it. Wrap your `for` loop in a function and execute it after your `$.each` — haim770, Nov 09 '15 at 16:14
The values in all the `title` properties are missing their closing quotes — Rory McCrossan, Nov 09 '15 at 16:14
can't loop over the array until the data has been received ...the first `A` in ajax is for *asynchronous* — charlietfl, Nov 09 '15 at 16:14
your pasted JSON is invalid. I suspect, however, it is a copy/paste error... — JAAulde, Nov 09 '15 at 16:16
Yeah, the actual JSON file is fine just the paste -- `articles` doesn't fill up according to the console. Checking using `articles[0]` displays `undefined` — Jacob Johnson, Nov 09 '15 at 16:36

Max Alcala · Answer 1 · 2015-11-09T16:36:49.297

Three things:

Your JSON is invalid. You're likely getting it pasted wrong, but it should look like this:

ex:

    {
    "news": [
        {
            "title": "Test 1",
            "author": "Chicago Tribune",
            "source": "http://www.chicagotribune.com/",
            "preview": "Long-simmering . . .",
            "picture": "IMG"
        },
        {
            "title": "Test 2",
            "author": "New York Times",
            "source": "http://www.nytimes.com/",
            "preview": "Information . . .",
            "picture": "IMG"
        },
        {
            "title": "Test 3",
            "author": "Chicago Tribune",
            "source": "http://www.chicagotribune.com/",
            "preview": "Blah blah blah . . .",
            "picture": "IMG"
        },

    ]
};

the $.each() will loop through each element of the news array, so you will only get one element into your anonymous function. Try this instead:

ex:

 $.getJSON('data.json', function(data) {
     $.each(data.news, function (i) {
         articles.push(new Article(i.title, i.author, i.preview, i.picture));
     });
 });

You're running into async issues because the for loop executes before your JSON arrives. Try adding in your for loop inside your $.getJSON call if you have code that depends on the articles being there. Here's a great explanation on async behavior.

Additionally, whenever in doubt as to what you're receiving in your parameters, add a debugger; inside your function - that way you can inspect and ensure you're getting what you inspect.

My `for` loop should only be printing the array native to my Javascript file. I'm only iterating through that array which should be filled with my `$.getJSON` function; however, your fix doesn't actually do anything differently unfortunately. — Jacob Johnson, Nov 09 '15 at 16:43
Your `for` loop should be right after your `$.each()` call, within the ajax call. Assuming you are getting your expected json back, your `Article` objects will be instantiated and you will be able to loop through them. — Max Alcala, Nov 09 '15 at 17:48

Extracting JSON data into Javascript object array

1 Answers1