Append JSON data from Yelp API to html

Question

I tried the JavaScript example from the Yelp developer site. Everything´s working but I wonder how to append the JSON data to an html list (ul). The list should contain restaurants in my town. Does anybody know how to do this?

P.S. PHP would be OK, too.

Edit: Thank you for your answers but it still doesn´t work. I´m not able to give you more details because the Yelp API is poorly documented and I´m new to JSON and PHP.

could you provide some of the sample data returned from the server — lngs, Mar 16 '13 at 11:13
yes but i want the format so i can give you som example of the code — lngs, Mar 16 '13 at 11:17
Hope this helps: https://dl.dropbox.com/u/12953592/prettyprint.png — Anselm, Mar 16 '13 at 11:22
need to loop over array and parse to html.... there are lots and lots of posts here and all over the web how to do this. Are you accesing json API from server or javascript? — charlietfl, Mar 16 '13 at 11:24
from server with this url: http://api.yelp.com/v2/search?term=restaurants&location=Goerlitz — Anselm, Mar 16 '13 at 11:47
can pass the json to browser ( as in an AJAX request) and parse to html with javascript, or use `json_decode` to create php array and loop over array on server to create html. Again lots of resources in web search how to do this — charlietfl, Mar 16 '13 at 11:56

dsaa · Answer 1 · 2013-03-16T11:43:40.870

If the JSON object is being returned as part of an Ajax request you'll need something vaguely like this:

$.post("yourajaxrequest.php", //calls .php file and transmits data via $_POST
                {
                    //variables required by the PHP file go here
                },
                //the function to perform when an object is returned from .php file
                function(toreceive){
                    var obj = JSON.parse(toreceive);
                    var first = obj.returnone;
                });

Without reading the Yelp documentation I'm not sure quite how you'll receive the object from Yelp, but the JSON.parse() method is the approach you should take to decode the object.

After parsing the object to a variable, you can assign the elements of the object by calling object.*insert array value here*;

This would be declared in PHP normally with something similar to:

$toencode = "The first string to be encoded";
$tosend['returnone'] = $toencode;
echo json_encode($tosend);
exit;

You can then append to a <ul> by using .append

<html>
<head>
</head>
<body>
    <ul id="list">
    </ul>
</body>
</html>

In your <script>:

$('#list').append('<li>'+first+'</li>');

Without any sample code or reading the Yelp documentation, there's not a lot more to go on.

Hope it helps.

**edited to add closing bracket and semi-colon to first line of code.

From the PHP file (https://github.com/Yelp/yelp-api/blob/master/v2/php/example.php): `$response = json_decode($data);` — Anselm, Mar 16 '13 at 11:53
OK, so this file is requesting data from Yelp, that's executed in lines 42-47. This returns a JSON object, which is decoded at line 50 and the resulting data is printed out for the user to see at line 53. If you held a copy of this file on your webserver and used an Ajax call to it from the client, you could remove lines 50 onwards and instead replace them with: echo $response; exit; — dsaa, Mar 16 '13 at 12:10
There's proper documentation for Ajax calls here: [link](http://api.jquery.com/jQuery.ajax/) — dsaa, Mar 16 '13 at 12:12

score -1 · Answer 2 · edited May 23 '17 at 12:21

-1

assume that outputs of the api call is ["blah", "blah", "blah", "blah"]

$("#container").append("<ul>");

$.ajax({
  // options go here

  success: function(datas){
    for(var i in datas){
      var data = datas[i];
       $("#container ul").append("<li>"+data+"</li>");
    }
  }
});

demo: http://jsfiddle.net/cDU52/1/ - fixed

read: http://api.jquery.com/append/

read: How to Loop through plain JavaScript object with objects as members?

edited May 23 '17 at 12:21

Community

1
1

answered Mar 16 '13 at 11:25

lngs

690
1
8
17

not very efficient making an append for every pass of loop. Also you can't write opening and closing tags to the DOM. Your code won't work as shown. `$("#container").append("
– charlietfl Mar 16 '13 at 11:30
my code looks like this: $(".ui-content").append("
- "+data+"
");
– Anselm Mar 16 '13 at 11:31
hey @charlietfl, have you ever try reading the doc. http://api.jquery.com/append/ . The .append() does append html string ,not dom object. – lngs Mar 16 '13 at 11:44
1

no, your code doesn´t work. The list items are outside of the ul! – Anselm Mar 16 '13 at 11:49
inspect the resultant html in console will see it is invalid html structure. Also `$("#container").append("");` does nothing because the html string is invalid for jQuery. IE will have all sorts of problems with your code due to invalid html. One other point, `append` will accept a DOM element as argument, or jQuery object. Look at docs closer – charlietfl Mar 16 '13 at 11:50
i fixed my code, could you please reconsider my answer and unnegative vote my answer. – lngs Mar 16 '13 at 12:09

Append JSON data from Yelp API to html

2 Answers2