looping through JSON array in a jQuery list

Question

I have this JSON array

// Json array
var productList = {"products": [
    {"description": "product 1", "price": "9.99"},
    {"description": "product 2", "price": "9.99"},
    {"description": "product 3", "price": "9.99"}
]
};

I want it to loop through my list view but have no idea how to do this all I can do so far is list one item at a time. Also, I can only list the product and not the product = the price. The jQuery forum inst helping... thanks !!

Here's the rest of the code

function loadList() {
//  var list = document.getElementById('productList');
    var list = $("#productList").listview();

    var listItem = document.createElement('li');
    listItem.setAttribute('id', 'listitem');

    listItem.innerHTML = productList.products[0].description;

    $(list).append(listItem);
    $(list).listview("refresh");

and the HTML file

<html xmlns:f="http://www.lipso.com/f" xmlns:l="http://www.lipso.com/v2/lml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<head>
    <title>Page Title</title>
    &meta;
    <script src="@=site.cfg.resources.url@/test.js"></script>
</head>
<body onLoad="loadList()">
<div data-role="page">
    <div data-role="header" id="header">
        <h1>Dynamic Product List</h1>
    </div>
    <div data-role="content" id="content">
        <ul id="productList" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        </ul>
    </div>
</div>
</body>
</html>

rockerest · Accepted Answer · 2011-06-29T17:58:55.940

13

Since you're already using jQuery, why don't you use the $.each() function?

Instead of this code:

var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem');

listItem.innerHTML = productList.products[0].description;

$(list).append(listItem);

Use this:

$(productList.products).each(function(index){
    $(list).append('<li id="listitem">' + this.description + " = " + this.price + '</li>');
});

edited Jun 29 '11 at 17:58

answered Jun 29 '11 at 17:50

rockerest

10,412
3
37
67

Thanks. this looks like it could work but I have no idea where to put this in my code or how to get it to work with my JQuery list. – JFFF Jun 29 '11 at 17:56
I'm a junior programmer and still learning... bare with me :P – JFFF Jun 29 '11 at 17:56
@john, I've updated my answer so that it **should** work with your situation – rockerest Jun 29 '11 at 17:59
1

@John, you should be setting `class` instead of ID. Every `id` on the page should be unique. Just wanted to point that out. Good luck. – rockerest Jun 29 '11 at 18:07

score 3 · Answer 2 · answered Jun 29 '11 at 17:49

3

Check out jQuery.each()

$.each(productList.products, function(index, value) {
   $(list).append('<li>' + value.description + ': ' + value.price + '</li>');
});

answered Jun 29 '11 at 17:49

fehays

3,147
1
24
43

score 0 · Answer 3 · answered Jun 29 '11 at 17:46

Using the "JSON array" or better named JavaScript object described below you can loop through it using for loops. productlist is an object that contains an array and each element in this array is an object that contains 2 properties or variables (description and price). The array can be iterated though using a typical for loop starting at 0 and ending at the array lenght - 1....the objects inside each array element can be iterated through using the "for (key in object)" notation.

// Json array
var productList = {"products": [
    {"description": "product 1", "price": "9.99"},
    {"description": "product 2", "price": "9.99"},
    {"description": "product 3", "price": "9.99"}
]
};

Here is an example of iterating through your Javascript Object.

for (var i = 0; i < productList.products.length; i ++) {
  for (var key in productList.products) {
    alert(key + ":" + productList.products[key]);
  }
}

If you're already using jQuery, I would stick to `$.each` like others have said: much cleaner. — Ben, Jul 04 '11 at 15:13

score 0 · Answer 4 · answered Jun 29 '11 at 17:50

0

I appears to me that what you really need is the .tmpl plugin to build your list from your json data:

http://api.jquery.com/jquery.tmpl/

answered Jun 29 '11 at 17:50

ShaneBlake

11,056
2
26
43

1

@JFFF given that you're just starting out, I would concentrate on using core jQuery to solve your issues for now. Once you're comfortable with it, and with what you're doing, by all means look at things like jquery.tmpl. But it's probably overkill for what you need right now. – Ben Jul 04 '11 at 15:12

looping through JSON array in a jQuery list

4 Answers4

Linked