Display JSON Array as html list

Question

I want to display my JSON array which i got from the PHP server as list in HTML. The code I used loops through the array, but when i replace the array with the variable it does not work.

 $(document).ready(function(){ $(document).bind('deviceready', function(){ //Phonegap ready onDeviceReady(); }); var ownproducts = $('#ownproducts'); $.ajax({ url: 'MYURL', dataType: 'jsonp', jsonp: 'jsoncallback', timeout: 5000, success: function(data, status){ $.each(data, function(i,item){ var products = '<br>'+item.item; var ul = $('<ul>').appendTo('body'); var json = { items: ['Banana','Cherry','Apple','Strawberry','Pear','Pineapple'] }; $(json.items).each(function(index, item) { ul.append($(document.createElement('li')).text(item)); }); ownproducts.append(products); }); }, error: function(){ ownproducts.text('Error Message'); } }); }); 

So i get a JSON file containing data from my database, item.item contains an array but when i replace this:

var json = { items:  ['Banana','Cherry','Apple','Strawberry','Pear','Pineapple'] };

for:

var json = { items:  item.item };

or:

var json = { items:  products };

it does not work (not displaying anything javascript related).

EDIT: I try to get some items from my database through PHP

    <?php
header('Content-type: application/json');

require 'config.php';
$con = mysqli_connect($url,$username,$password,$database);

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$userid = $_GET['userID'];


mysqli_select_db($con, $database);

$sql = "SELECT shoppingListID AS id, shoppingListUserID AS userid, shoppingCheckBox AS checkbox, shoppingItem AS item, shoppingDate AS date
FROM shoppinglist
WHERE shoppingListUserID='$userid'
ORDER BY shoppingDate DESC";
$result = mysqli_query($con,$sql) or die ("Query error: " . mysqli_error());

$records = array();

while($row = mysqli_fetch_assoc($result)) {
    $records[] = $row;
}

mysqli_close($con);

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
?>

the ShoppingItem field contains an array like ["Tomatos","Apples","Mangos","Bananas"] the SQL returns multiple shoppinglists from a single user, I want to display the shoppinglists on cards with the items of each list in an html list.

Anyone any suggestions? I appreciate the help.

Answer 1

Let me suppose that your JSON endpoint does in fact return the right data -- in this case visiting what you"ve labeled MYURL generates (I believe!) the text:

jsoncallback({"items":["Banana","Cherry","Apple","Strawberry","Pear","Pineapple"]})

Then we can move on to your logic, which consists in this callback function:

function (data, status) {
    $.each(data, function (i, item) {
        var products = "<br>" + item.item;
        var ul = $("<ul>").appendTo("body");
        var json = {
            items: ["Banana", "Cherry", "Apple", "Strawberry", "Pear", "Pineapple"]
        };
        $(json.items).each(function (index, item) {
            ul.append($(document.createElement("li")).text(item));
        });
        ownproducts.append(products);
    });
}

What is the problem here? There are a lot. The first is that you should probably not be iterating over data , since that is not your array. Instead you should be iterating over data.items .

The second is that you should probably just be creating the HTML rather than creating a ton of DOM stuff. You can use vanilla JS's Array.prototype.map or Array.prototype.join functions rather than delegating this to JQuery: it is a part of the JS spec that this is sufficient:

function (data, status) {
    var html = '<ul><li>' + data.items.join('</li><li>') + '</li></ul>';
    $(html).appendTo('body');
}