htmlページでのJSONデータの表示

Foursquare APIを利用したAPI Appで作業しています。 getRequest、私の結果はです。私はコンソール .logに表示されている私は、JSONです。事があるhtmlページでのJSONデータの表示

、私はJSONデータを解析し、私は私のHTMLページに欲しいものを表示する方法を知りません。

私はの「名前」の会場が表示されるようにしようとしていますが、その方法はわかりません。

P.S：私はフォースクエアから入ってくるデータのMath.random機能を持っているので、何でも私にconsole.logに表示されるランダムな会場名は、私は私のHTMLページに表示するものです。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Search</title> 
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js" type="text/javascript" id="jquery"></script> 
<script type="text/javascript" src="apps/app.js"></script> 

</head> 

    <body> 

     <H1>Hunger Pains</H1> 
      <p>Search for food cause you cant take it anymore</p> 

      <!--This is the area your location gets spit out on the html page--> 
      <p id="demo"></p> 

      <form id ="search-term"> 

      <!--text entry field- 
      <input type="text" id="query">--> 

      <!--Submit button--> 
      <input id="submit" type="submit" value="submit"> 

      <!--Search results div--> 
      <div id="search-results"></div> 


      </form> 
    </body> 
</html>

のjQuery：

$(document).ready(function(){ 

//document.getElementById("submit").disabled = false; 

//When you click the submit button it fires off the getRequest. 
$(function(){ 
    $('#search-term').submit(function(event){ 
    event.preventDefault(); 
    //getRequest(); 
     myFunction(); 


    }); 
}); 

// This is the get request. It has a random function that randomizes the callback data. Once you get the randomizes data, it shows in the console window. 
//This function displays three random results based on the myFunction below 
function getRequest(){ 

    $.getJSON('https://api.foursquare.com/v2/venues/search?v=20131016&ll=40.7%2C-74&intent=browse&radius=800&categoryId=4d4b7105d754a06374d81259&client_id=C2IEUINHBL2HEVOHIWNO0GGN5EUHK3PGYH03HCZRP2ETA4CF&client_secret=DOLF3UBQZOY5GX2DP3EXBQ5CW4AHEWMNDGRMH0IHJWZBDSIO', function(data){ 
    var random = data.response.venues[Math.floor(Math.random() * data.response.venues.length)]; 
    //showResults(); 
    console.log(random); 

    }); 

} 

//This is the function that calls getRequest function three times then stops. 

    function myFunction(){ 
    var myVar = setInterval(function(){getRequest();}, 500); 
    //clearTimeout(myVar); 
    setTimeout(function() { clearInterval(myVar); }, 1600); 
} 

});

出典

2016-03-22 thesubhuman

をちょうど推測、おそらく 'random.name'。 – Barmar

JSONの 'O'はObjectです。あなたはオブジェクトを取得し、プロパティを持っているので、@ Barmarが示唆しているように使えます。 'console.log（random）'を 'console.log（random.name）'に置き換えて、ランダムなビジネスの名前を表示することができます。 – LinuxDisciple

恐ろしい！それは完全に働いた。そのような単純な答えと私はこれ以上私の頭脳をラッキングしています。どうもありがとう。 – thesubhuman

このような何かがそれを実行する必要があります。

$("#search-results").append('<br>' + random.name);

出典

2016-03-22 20:01:38 Barmar

パーフェクト。これも同様に機能します。あまりにも多くのギャングに感謝！ – thesubhuman

ただ何かを実現しました。私のコンソールは3つのオブジェクトを表示します。私が使っているのは、$（ "＃search-results"）。text（random.name）;私のHTMLページには1つの会場名しか表示されません。どのようにして3つすべてを同時に表示するには？ – thesubhuman

私は 'append'を使う答えを変えてしまったので、結果DIVの古い内容を置き換えません。 – Barmar

をあなたはFoursquareの使用から取得しているオブジェクトから名前を取得するには：

console.log(random.name);

そして、あなたは、例えば、使用のためのURLが必要な場合：

console.log(random.url);

出典

2016-03-22 20:01:40

入手しました。ありがとう！ – thesubhuman

htmlページでのJSONデータの表示

答えて

関連する問題