CODEWITHSUNDEEP
javascriptjqueryhtmljson
thesubhuman
thesubhuman

Reputation: 115

Cant display JSON data in html page

I'm working on an API App utilizing the Foursquare API. Using my getRequest, Im getting my results in JSON, which Im displaying in my console.log.

The thing is, I don't know how to parse the JSON data and display what I want on my HTML page.

I'm trying to have the 'name' of the venues displayed, but I don't know how to do it.

P.S: I have a Math.random function on the incoming data from Foursquare, so whatever random venue name that is displayed in my console.log is what I want displayed in my HTML page.

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);
}

});

Upvotes: 0

Views: 1209

Answers (2)

Barmar
Barmar

Reputation: 782499

Something like this should do it:

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

Upvotes: 1

Adan Archila
Adan Archila

Reputation: 323

To get the name from the object you are getting from Foursquare use:

console.log(random.name);

And if you need the url for example use:

console.log(random.url);

Upvotes: 1

Related Questions