Search jQuery

jQuery Forum

Using jQuery

Abdul Raz..

Iterate through JSON Result

in Using jQuery • 10 years ago

Dear,

How can iterate through this Json result:

{"boqItemCodeMaps1":{"C4":["V41","V42","V43"],"C3":["V31","V32","V33"]}}

Replies(1)

alano999

Re: Iterate through JSON Result

10 years ago

Hi Abdul.

Updated to include an example iterator.

You can generally think of JSON as standard JavaScript arrays and objects. Looking at your sample JSON, it says, in terms of arrays/objects:-

The encapsulating object (objects are denoted by {...}) has a property called boqItemCodeMaps1 whose value is another object containing two properties C4 and C3 which are both arrays (arrays are denoted by [...]).

For example, after assigning the JSON to a variable e.g. var myJSON = {"boqItemCodeMaps1":.........};, to read the value of the first element of C3 array you could access it thus: alert(myJSON.boqItemCodeMaps1.C3[0]); .

Here's an example iterator. Excuse the length, this is due to me adding some comments to aid your understanding...

<!DOCTYPE html>
<html>
<head>
<title>Test 82</title>
<script src="scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var myJSON = { "boqItemCodeMaps1": { "C4": ["V41", "V42", "V43"], "C3": ["V31", "V32", "V33"]} };
//take a working reference to target <ul> to save jQuery from walking the DOM each time
var $list = $("ul#list");
//iterate boqItemCodeMaps1 to retrieve the Cx arrays
$.each(myJSON.boqItemCodeMaps1, function (index, value) {
//tip: "this" will, in turn, hold the JavaScript version of array
//... and "$(this)" will be the jQuery equivalent
//when using .each(), the index and value are available directly as arguments
//create a new <ul> ready to display the value contents of Cx
var $Cx = $("<ul>");
//create a new <li>, add summary details of Cx, append the empty <ul> for details, append all to $list
$("<li>").html("<b>" + index + ":</b>").append($Cx).appendTo($list);
//iterate the Cx array value
$.each(value, function (index, value) {
$("<li>").text(index + ": " + value).appendTo($Cx);
});
});
});
</script>
</head>
<body>
<span>boqItemCodeMaps1:-</span>
<ul id="list" />
</body>
</html>

Best regards,

Alan

Top Reply

Response title

Attachments

jQuery Forum

Iterate through JSON Result

Replies(1)

Re: Iterate through JSON Result

Statistics

Tags

Actions