Menu
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>
311
The $. each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time.
Looping Using JSON JSON stands for JavaScript Object Notation. It's a light format for storing and transferring data from one place to another. So in looping, it is one of the most commonly used techniques for transporting data that is the array format or in attribute values.
1) Create a Maven project and add json dependency in POM. xml file. 2) Create a string of JSON data which we convert into JSON object to manipulate its data. 3) After that, we get the JSON Array from the JSON Object using getJSONArray() method and store it into a variable of type JSONArray.
Use Object.values() or Object. entries(). These will return an array which we can then iterate over. Note that the const [key, value] = entry; syntax is an example of array destructuring that was introduced to the language in ES2015.
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>');
});
Check out jQuery.each()
$.each(productList.products, function(index, value) {
$(list).append('<li>' + value.description + ': ' + value.price + '</li>');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
