Using JSON http request in JavaScript

Question

I'm currently working on a coding project that entails pulling images, titles, thumbnails, etc. from what I believe is a JSON Http Request (although I'm not sure) and adding them to a webpage, which will then be styled with CSS. I have minimal experience using JSON, jQuery, AJAX, etc. I can't figure out how to take the string I'm provided with and turn it in to a usable JavaScript object that I can add to my html page.

The URL that I'm supposed to pull this request from can be found here .

When I go to that URL I'm presented with the following:

{"welcome_message":"Hi there! Good luck!","endpoints":["/videos","/articles"],"supportedParameters":{"startIndex":"The index of the first record to return in the response. Used for pagination. Min is 0, max is 300","count":"The number of records to return in the response. Min is 1, max is 20."},"sampleRequest":"http://ign-apis.herokuapp.com/articles?startIndex=30\u0026count=5"}

If you'll notice there is a URL at the end of this JSON that leads here . When I follow that URL I'm presented with the following:

{"count":5,"startIndex":30,"data":[{"thumbnails":[{"url":"http://assets1.ignimgs.com/2016/11/07/akumajpg-f485c3_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2016/11/07/akumajpg-f485c3_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2016/11/07/akumajpg-f485c3_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"Opinion: Despite Low Sales, Street Fighter 5 Isn’t Going Anywhere","networks":["ign"],"state":"published","slug":"opinion-despite-low-sales-street-fighter-5-isnat-going-anywhere","subHeadline":"Call off the funeral, folks.","publishDate":"2017-02-08T19:00:52+0000","articleType":"article"},"tags":["feature","capcom","fighting","game","pc"]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2017/02/07/gamingawardsannouncement-ign-blogroll-lisahause-1486502878639_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2017/02/07/gamingawardsannouncement-ign-blogroll-lisahause-1486502878639_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2017/02/07/gamingawardsannouncement-ign-blogroll-lisahause-1486502878639_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"SXSW Gaming Awards Voting Ends Soon","networks":["ign"],"state":"published","slug":"sxsw-gaming-awards-voting-ends-soon-2","publishDate":"2017-02-08T19:00:25+0000","articleType":"article","subHeadline":"The 2017 SXSW Gaming Awards are open to public voting until February 10th.\r\n"},"tags":["blogroll-promoted-ad","sxsw"]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2017/02/08/daily-deals-blogrollsackboy-1486574960774_compact.png","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2017/02/08/daily-deals-blogrollsackboy-1486574960774_medium.png","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2017/02/08/daily-deals-blogrollsackboy-1486574960774_large.png","size":"large","width":626,"height":352}],"metadata":{"headline":"Daily Deals: Get LittleBigPlanet 3 for Free with a Discounted PlayStation Plus 1-Year Membership!","networks":["ign"],"state":"published","slug":"daily-deals-get-littlebigplanet-3-for-free-with-a-discounted-playstation-plus-1-year-membership","subHeadline":"How can you say no to joining PS Plus (or extending your current membership) when that cute, smiling Sackboy is waiting for you?","publishDate":"2017-02-08T18:00:23+0000","articleType":"article"},"tags":["daily-deals"]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2017/02/08/davidsyd-1280-1486576588705_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2017/02/08/davidsyd-1280-1486576588705_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2017/02/08/davidsyd-1280-1486576588705_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"Legion Review","networks":["ign"],"state":"published","slug":"legion-series-premiere-review","publishDate":"2017-02-08T17:57:01+0000","articleType":"article","subHeadline":"The premiere episode of FX’s new series Legion, debuting Wednesday night, offers up a whole new take on the X-Men world."},"tags":[]},{"thumbnails":[{"url":"http://assets1.ignimgs.com/2016/12/12/theoa-blogroll-1481576018102_compact.jpg","size":"compact","width":306,"height":172},{"url":"http://assets1.ignimgs.com/2016/12/12/theoa-blogroll-1481576018102_medium.jpg","size":"medium","width":466,"height":262},{"url":"http://assets1.ignimgs.com/2016/12/12/theoa-blogroll-1481576018102_large.jpg","size":"large","width":626,"height":352}],"metadata":{"headline":"Netflix Renews The OA for Season 2 and Love for Season 3","networks":["ign"],"state":"published","slug":"netflix-renews-the-oa-for-season-2-and-love-for-season-3","subHeadline":"The streaming services continues to order more original content. ","publishDate":"2017-02-08T17:28:12+0000","articleType":"article"},"tags":["news","brit-marling","company","drama","jason-isaacs"]}]}

I've done some research that makes me think that these are JSON Http requests. The problem I'm facing is that I'm not sure how to turn them in to usable JavaScript objects that I can use in my webpage. To try to troubleshoot this problem myself I watched "JavaScript and JSON" on Lynda.com, as well as "JavaScript and AJAX" to try to figure out what to do with these, that didn't bear any meanful fruit. The next step I took was to read the section about JSON in "JavaScript and jQuery: The Missing Manual". In my book it says to use the function $.getJSON(url, data, callback); I'm assuming that I'd add the url(s) that I posted above as the argument for url. I'm not sure what to pass for "data" and "callback" though.

To make a long question short, could someone give me an example of how to take the JSON string from the provided link(s) and turn the information into usable objects I can arrange and style?

Please note that I'm new to both programming and also to StackOverflow. I realize that there are strict guidelines about how to properly ask questions on here. If anything about my question is inappropriate please kindly let me know. Any and all help is greatly appreciated!

Answer 1

If you're using $.getJSON , you don't need to do anything to turn the JSON string into usable data, it does that automatically for you (that's the difference between $.get and $.getJSON ).

However, you won't be able to call the API directly from Javascript, because of the same-domain rule that prohibits making AJAX calls to different domains. You'll need to provide a proxy on your own server that performs the call; you can use Simple PHP Proxy for this.

The data argument is an object containing any parameters you need to send to the API. It's optional and you can leave it out if not needed.

The callback argument is your function that does something with the returned object (which will already be parsed for you by $.getJSON ). For example:

$.getJSON(url, function(result) {
    alert(result.welcome_message);
});