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-29 17:58:55Z

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, 2011 at 17:58

answered Jun 29, 2011 at 17:50

rockerest

10.5k3 gold badges39 silver badges67 bronze badges

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

4 Comments

JFFF Over a year ago

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 Over a year ago

I'm a junior programmer and still learning... bare with me :P

rockerest Over a year ago

@john, I've updated my answer so that it should work with your situation

rockerest Over a year ago

@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.

fehays · Accepted Answer · 2011-06-29 17:49:52Z

3

Check out jQuery.each()

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

answered Jun 29, 2011 at 17:49

fehays

3,1671 gold badge26 silver badges44 bronze badges

Comments

John Hartsock · Accepted Answer · 2011-06-29 17:46:25Z

0

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

answered Jun 29, 2011 at 17:46

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

2 Comments

JFFF Over a year ago

Thanks for the fast answer I'll try that :D

Ben Over a year ago

If you're already using jQuery, I would stick to $.each like others have said: much cleaner.

ShaneBlake · Accepted Answer · 2011-06-29 17:50:58Z

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, 2011 at 17:50

ShaneBlake

11.1k2 gold badges28 silver badges43 bronze badges

1 Comment

Ben Over a year ago

@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.

Collectives™ on Stack Overflow

looping through JSON array in a jQuery list

4 Answers 4

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related