Cant display JSON data in html page

Question

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

});

The 'O' in JSON is for Object. You get an object back, and it has properties so you can use it exactly like @Barmar suggests. You can replace your console.log(random) with console.log(random.name) to print out the random business's name. — LinuxDisciple
– LinuxDisciple, Commented Mar 22, 2016 at 20:04
Awesome! That totally worked. Such a simple answer and Ive been racking my brain over this. Thanks alot. — thesubhuman
– thesubhuman, Commented Mar 22, 2016 at 20:12

Adan Archila · Accepted Answer · 2016-03-22 20:01:40Z

1

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

answered Mar 22, 2016 at 20:01

Adan Archila

3231 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2016-03-22 20:44:53Z

1

Something like this should do it:

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

edited Mar 22, 2016 at 20:44

answered Mar 22, 2016 at 20:01

Barmar

789k57 gold badges554 silver badges669 bronze badges

2 Comments

thesubhuman Over a year ago

Just realized something. My console displays 3 objects. When I use: $("#search-results").text(random.name); my HTML page only displays one venue name. How can I get it to display all three at the same time?

Barmar Over a year ago

I've changed the answer to use append so it doesn't replace the old contents of the result DIV.

Collectives™ on Stack Overflow

Cant display JSON data in html page

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related