How can iterate a json object string with jquery

Question

I have web service which return json string like : d={"main0ID":"abc.es/main","main1ID":"ah/main"} I wanna append this to ul HTML control. How to iterate over json object string and append to ul?

Thanks...

using w3schools is an atrocity. So much misinformation on that site. — NDBoost
– NDBoost, Commented Jun 19, 2012 at 4:25

xdazz · Accepted Answer · 2012-06-19 03:54:10Z

3

You could use for..in to iterate an object.

for (var key in d) {
  console.log(key, d[key]);
}

answered Jun 19, 2012 at 3:54

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

Comments

Shyju · Accepted Answer · 2012-06-19 03:56:17Z

1

Assuming you have ul like this

<ul id="ulItems"></ul>

This will get the items from JSON and add to UL

$(function(){
    var items="";
    var data={"main0ID":"abc.es/main","main1ID":"ah/main"}
       $.each(data,function(index,item){
         items+="<option value='"+item+"'>"+item+"</option>";
       });       
    $("#ulItems").html(items);
});

Working sample : http://jsfiddle.net/tFpTu/4/

Always build a string and call the html function only once instead of calling the append function n times inside a loop

answered Jun 19, 2012 at 3:56

Shyju

220k106 gold badges421 silver badges499 bronze badges

Comments

Vinayak Phal · Accepted Answer · 2012-06-19 03:55:40Z

1

You can use .each() or .map() to iterate over the json object.

answered Jun 19, 2012 at 3:55

Vinayak Phal

8,9194 gold badges35 silver badges53 bronze badges

Comments

coolguy · Accepted Answer · 2012-06-19 03:55:40Z

1

    $.ajax({           
                url: 'your url'
                type : 'POST',
                data : {/*any data*/},
                dataType:'json',
                success: function(msg) { //your json return
                for (i=0;i<msg.length;i++){
       alert(msg[i]['your_index']);
}

}

answered Jun 19, 2012 at 3:55

coolguy

7,9549 gold badges48 silver badges72 bronze badges

Comments

Wasim Karani · Accepted Answer · 2012-06-19 04:02:47Z

1

Both this methods can be used
But first method is considerably fast...

Check this tutorial ...

for (var keyIndex in d) {
    console.log(keyIndex, d[keyIndex]);
}

$.each(data,function(keyIndex,value){
    console.debug(inkeyIndexex,value);
});

answered Jun 19, 2012 at 4:02

Wasim Karani

8,87410 gold badges58 silver badges100 bronze badges

Comments

Prateek · Accepted Answer · 2012-06-19 04:53:50Z

0

$("#Button1").click(function () {
WebService.GetList(OnComplete, OnError);
function OnComplete(result) 
{
var items = "";
var value = Sys.Serialization.JavaScriptSerializer.deserialize(result, true);
for (var property in value) 
{              
items += "<option value='" + value[property] + "'>" + value[property] + "</option>";
}
$("#ContentPlaceHolder1_ListBox1").html(items);
}
function OnError(err)
{
alert("The error is :" + err.get_Message());
}
});

answered Jun 19, 2012 at 4:53

Prateek

1,2201 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

How can iterate a json object string with jquery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related