Reading json to create an array of objects with jQuery .each()

Question

I'm trying to create an array of objects by reading in a json. This is the relevant code:

//president object consctructor
function president(a_presName, a_presDates, a_presNick, a_presImage) {
    this.presName=a_presName;
    this.presDates=a_presDates;
    this.presNick=a_presNick;
    this.presImage=a_presImage;
}


var myPres = new Array();

$(document).ready(function() {



    $.getJSON('Presidents.json', function(data) {


        $.each(data.presidents, function (i, item) {
            myPres[i]=new president(item.presName, item.presDates, item.presNick, item.PresImage);
        });

    });  //end getJSON
    document.write(myPres[1].presName);
}); //end doc ready

And this is the json:

{ "presidents": [ { "presName":"George Washington", "presDates":"1789-1797", "presNick":"Father of His Country", "presImage":"gwashington.gif" }, { "presName":"John Adams", "presDates":"1797-1801", "presNick":"Atlas of Independence", "presImage":"jadams.gif" }, { "presName":"Thomas Jefferson", "presDates":"1801-1809", "presNick":"Sage of Monticello", "presImage":"tjefferson.gif" }, { "presName":"James Madison", "presDates":"1809-1817", "presNick":"Father of the Constitution", "presImage":"jmadison.gif" }, { "presName":"James Monroe", "presDates":"1817-1825", "presNick":"Era-of-Good-Feeling President", "presImage":"jmonroe.gif" }, { "presName":"John Quincy Adams", "presDates":"1825-1829", "presNick":"Old Man Eloquent", "presImage":"jqadams.gif" }, { "presName":"Andrew Jackson", "presDates":"1829-1837", "presNick":"Old Hickory", "presImage":"ajackson.gif" }, { "presName":"Martin Van Buren", "presDates":"1837-1841", "presNick":"The Little Magician", "presImage":"mvanburen.gif" }, { "presName":"William Henry Harrison", "presDates":"1841", "presNick":"Old Tippecanoe", "presImage":"whharrison.gif" }, { "presName":"John Tyler", "presDates":"1841-1845", "presNick":"Accidental President", "presImage":"jtyler.gif" }, { "presName":"James Knox Polk", "presDates":"1845-1849", "presNick":"Young Hickory", "presImage":"jkpolk.gif" }, { "presName":"Zachary Taylor", "presDates":"1849-1850", "presNick":"Old Rough and Ready", "presImage":"ztaylor.gif" }, { "presName":"Millard Fillmore", "presDates":"1850-1853", "presNick":"The American Louis Philippe", "presImage":"mfillmore.gif" }, { "presName":"Franklin Pierce", "presDates":"1853-1857", "presNick":"Young Hickory of the Granite Hills", "presImage":"fpierce.gif" }, { "presName":"James Buchanan", "presDates":"1857-1861", "presNick":"Old Buck", "presImage":"jbuchanan.gif" }, { "presName":"Abraham Lincoln", "presDates":"1861-1865", "presNick":"Honest Abe", "presImage":"alincoln.gif" }, { "presName":"Andrew Johnson", "presDates":"1865-1869", "presNick":"None", "presImage":"ajohnson.gif" }, { "presName":"Ulysses Simpson Grant", "presDates":"1869-1877", "presNick":"Hero of Appomattox", "presImage":"usgrant.gif" }, { "presName":"Rutherford Birchard Hayes", "presDates":"1877-1881", "presNick":"Dark-Horse President", "presImage":"rbhayes.gif" }, { "presName":"James Abram Garfield", "presDates":"1881", "presNick":"None", "presImage":"jagarfield.gif" }, { "presName":"Chester Alan Arthur", "presDates":"1881-1885", "presNick":"The Gentleman Boss", "presImage":"caarthur.gif" }, { "presName":"Grover Cleveland", "presDates":"1885-1889", "presNick":"None", "presImage":"gcleveland.gif" }, { "presName":"Benjamin Harrison", "presDates":"1889-1893", "presNick":"Kid Gloves Harrison", "presImage":"bharrison.gif" }, { "presName":"Grover Cleveland", "presDates":"1893-1897", "presNick":"None", "presImage":"gcleveland.gif" }, { "presName":"William McKinley", "presDates":"1897-1901", "presNick":"Idol of Ohio", "presImage":"wmckinley.gif" }, { "presName":"Theodore Roosevelt", "presDates":"1901-1909", "presNick":"Trust-Buster", "presImage":"troosevelt.gif" }, { "presName":"William Howard Taft", "presDates":"1909-1913", "presNick":"None", "presImage":"whtaft.gif" }, { "presName":"Woodrow Wilson", "presDates":"1913-1921", "presNick":"Schoolmaster in Politics", "presImage":"wwilson.gif" }, { "presName":"Warren Gamaliel Harding", "presDates":"1921-1923", "presNick":"None", "presImage":"wgharding.gif" }, { "presName":"Calvin Coolidge", "presDates":"1923-1929", "presNick":"Silent Cal", "presImage":"ccoolidge.gif" }, { "presName":"Herbert Clark Hoover", "presDates":"1929-1933", "presNick":"None", "presImage":"hchoover.gif" }, { "presName":"Franklin Delano Roosevelt", "presDates":"1933-1945", "presNick":"FDR", "presImage":"fdroosevelt.gif" }, { "presName":"Harry S. Truman", "presDates":"1945-1953", "presNick":"Give 'Em Hell Harry", "presImage":"hstruman.gif" }, { "presName":"Dwight David Eisenhower", "presDates":"1953-1961", "presNick":"Ike", "presImage":"ddeisenhower.gif" }, { "presName":"John Fitzgerald Kennedy", "presDates":"1961-1963", "presNick":"JFK", "presImage":"jfkennedy.gif" }, { "presName":"Lyndon Baines Johnson", "presDates":"1963-1969", "presNick":"LBJ", "presImage":"lbjohnson.gif" }, { "presName":"Richard Milhous Nixon", "presDates":"1969-1974", "presNick":"None", "presImage":"rmnixon.gif" }, { "presName":"Gerald Rudolph Ford", "presDates":"1974-1977", "presNick":"Jerry", "presImage":"grford.gif" }, { "presName":"James Earl Carter Jr.", "presDates":"1977-1981", "presNick":"Jimmy", "presImage":"jecarter.gif" }, { "presName":"Ronald Wilson Reagan", "presDates":"1981-1989", "presNick":"The Gipper", "presImage":"rwreagan.gif" }, { "presName":"George Herbert Walker Bush", "presDates":"1989-1993", "presNick":"Poppy", "presImage":"ghwbush.gif" }, { "presName":"William Jefferson Clinton", "presDates":"1993-2001", "presNick":"Bill", "presImage":"wjclinton.gif" }, { "presName":"George Walker Bush", "presDates":"2001-2009", "presNick":"W", "presImage":"gwbush.gif" }, { "presName":"Barack Hussein Obama", "presDates":"2009-", "presNick":"None", "presImage":"bhobama.gif" } ] }

When I use the document.write to test it works fine if it's placed right before }); //end getJSON, but if it's place immediately after it is null. What am I missing?

You're missing the fact that [AJAX calls are asynchronous by default](http://stackoverflow.com/a/10370489/1233508). — DCoder, May 06 '12 at 16:25
You know that with `new president`, you simply create a one to one copy of the objects in the `data.presidents` array? Unless you have any methods defined on `president.prototype`, this is unnecessary. With the code you have shown, you could simply do `myPres = data.presidents;` and you would get the same result. — Felix Kling, May 06 '12 at 16:30

score 3 · Accepted Answer · answered May 06 '12 at 16:22

3

Placing the document.write after //end getJSON means it will run before the JSON is retrieved.

The anonymous function you pass to .getJSON is called when the data comes back from the server. If you run the document.write after the //end getJSON it is called before the request comes back.

answered May 06 '12 at 16:22

joshp

1,886
2
20
28

+1 It would be good to add an explanation of the "success" callback function to your answer though. – Paul May 06 '12 at 16:25
Is there something that I can do to "wait" for that request to complete, or should I just put whatever code I need that uses that data inside of `//end getJSON`? I'm pretty new to JS/JQuery. – MDMarra May 06 '12 at 16:30
That function "inside //end getJSON" is the mechanism for waiting. Anything you put in there runs after data is returned. If you need the data after that for a long time, you might want to store it somewhere else. – joshp May 06 '12 at 16:34

score 0 · Answer 2 · answered May 06 '12 at 16:57

0

I don't like jQuery's $.each() I would do it like this:

function parseJSON(JSONObj){
    var array=new Array();
    var count=0;
    for(var Obj in JSONObj){
        array[count]=JSONObj[Obj];
        count++;
    }
}

Please tell me if it is anything else you wanted

answered May 06 '12 at 16:57

javascript is future

885
8
14

Seems like in this case (as pointed out in the comment), .each() or any other loop is extemporaneous. Just for my own knowledge, is there a compelling reason not to use `$.each()` other than the fact that you don't like it? – MDMarra May 06 '12 at 17:02
1

@MDMarra: there is actually [a good reason](http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays) to *not* use this option and use `$.each()` instead. – DCoder May 06 '12 at 17:05

Reading json to create an array of objects with jQuery .each()

2 Answers2