JavaScriptでのJSON httpリクエストの使用

Question

私は現在、画像、タイトル、サムネイルなどをJSON HTTPリクエスト（私はわからないが）と思っているものから引き出して、 CSSでスタイルを設定するWebページ。私はJSON、jQuery、AJAXなどを使っている経験はほとんどありません。私が提供している文字列をHTMLページに追加できるJavaScriptオブジェクトに変換する方法はわかりません。

このリクエストを引き出すURLは、hereです。

私はそのURLに行くとき、私は次のように提示しています：

{"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"} 

あなたがhereをリードし、このJSONの最後にURLがある場合はわかります。私はそのURLをたどるとき、私は次のように提示しています：

{"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"]}]} 

私は私がこれらはJSON HTTP要求であることを思わせるいくつかの研究を行ってきました。私が直面している問題は、自分のウェブページで使用できるJavaScriptオブジェクトに変換する方法がわからないことです。私自身、この問題のトラブルシューティングを試みるために、Lynda.comの「JavaScript and JSON」と、JavaScriptやAJAXを見て、何を意味するのか分かりませんでした。私が取った次のステップは、「JavaScriptとjQuery：The Missing Manual」のJSONに関するセクションを読むことでした。私の本では、関数$ .getJSON（url、data、callback）を使うと書かれています。私は、上記のURLをurlの引数として追加すると仮定しています。私は "データ"と "コールバック"のために何を渡すべきかわからない。

長い質問をするには、提供されたリンクからJSON文字列を取得し、その情報を使用可能なオブジェクトに整理してスタイルを設定する方法の例を教えてください。

私は両方のプログラミングとStackOverflowに新しいことに注意してください。私はここで正しく質問する方法について厳しいガイドラインがあることを理解しています。私の質問について何かが不適切であれば、親切に私に知らせてください。すべての助けが大歓迎です！

Answer 1

$.getJSONを使用している場合は、JSON文字列を使用可能なデータに変換するために何もする必要はありません。これは自動的に行います（$.getと$.getJSONの違いです）。

しかし、異なるドメインへのAJAX呼び出しを禁止する同じドメインルールがあるため、APIをJavascriptから直接呼び出すことはできません。あなたは自分のサーバー上で呼び出しを行うプロキシを提供する必要があります。これにはSimple PHP Proxyを使用できます。

data引数は、APIに送信する必要があるパラメータを含むオブジェクトです。これはオプションで、必要がない場合は省略することができます。

callback引数は、返されたオブジェクト（既に$.getJSONによって解析されている）で何かを行う関数です。例：

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