Unable to loop through complex JSON object with Jquery

Question

I am attempting to loop through the following JSON object without success:

[
    {
        "Count": 0,
        "GroupId": 1,
        "Icon": null,
        "Service": [
            {
                "Count": 0,
                "Icon": null,
                "ServiceId": 1,
                "Type": "Cat"
            },
            {
                "Count": 0,
                "Icon": null,
                "ServiceId": 2,
                "Type": "Dog"
            },
            {
                "Count": 0,
                "Icon": null,
                "ServiceId": 3,
                "Type": "Whale"
            }
        ],
        "Type": "Animal carcass removal"
    }
]

I need to get to the 'Service' object and append the Type to a dropdown list? I suspect I may need a each loop within a loop by cant seem tog et it right?

Any help would be appreciated.

Thanks

Please post the Javascript you already had so we have a basis to answer you. — Johnride
– Johnride, Commented Mar 25, 2014 at 11:54

Matyas · Accepted Answer · 2014-03-25 11:55:21Z

1

You should be able to do it with

$.each(data[0].Service, function () {
    $('select').append('<option val="'+this.Type+'">'+this.Type+'</option>')
});

where data is represents the object from your question.

See live fiddle

answered Mar 25, 2014 at 11:55

Matyas

13.7k3 gold badges66 silver badges77 bronze badges

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

1 Comment

Matyas Over a year ago

By fallback, if no value is specified the title text is taken as value. And the OP was having problems with the looping (as I understood it), but I've altered the answer to be more explicit.

Anoop Joshi P · Accepted Answer · 2014-03-25 11:57:36Z

Try like this

            var data = [
    {
        "Count": 0,
        "GroupId": 1,
        "Icon": null,
        "Service": [
            {
                "Count": 0,
                "Icon": null,
                "ServiceId": 1,
                "Type": "Cat"
            },
            {
                "Count": 0,
                "Icon": null,
                "ServiceId": 2,
                "Type": "Dog"
            },
            {
                "Count": 0,
                "Icon": null,
                "ServiceId": 3,
                "Type": "Whale"
            }
        ],
        "Type": "Animal carcass removal"
    }
]

        for (i = 0; i < data[0].Service.length; i++) {
            $("#slct").append($("<option/>", { html: data[0].Service[i].Type, value: data[0].Service[i].ServiceId }));
        }

Html

<select id="slct">
</select>

Royi Namir · Accepted Answer · 2014-03-25 11:58:01Z

0

$.each(a[0].Service,function (i,n){

  $("#ddl").append($("<option></option>").val(n.ServiceId).text(n.Type));


})

http://jsbin.com/gigusora/2/edit

answered Mar 25, 2014 at 11:58

Royi Namir

149k145 gold badges502 silver badges833 bronze badges

Comments

Sridhar R · Accepted Answer · 2014-03-25 11:58:44Z

0

Try like this

var jso=[
{
    "Count": 0,
    "GroupId": 1,
    "Icon": null,
    "Service": [
        {
            "Count": 0,
            "Icon": null,
            "ServiceId": 1,
            "Type": "Cat"
        },
        {
            "Count": 0,
            "Icon": null,
            "ServiceId": 2,
            "Type": "Dog"
        },
        {
            "Count": 0,
            "Icon": null,
            "ServiceId": 3,
            "Type": "Whale"
        }
    ],
    "Type": "Animal carcass removal"
}

] 
var ser=jso[0].Service;
var output='';
for(var i in ser)
{
   output+='<option value="'+ser[i].Type+'">'+ser[i].Type+'</option>';
}
$('select').append(output)

DEMO

answered Mar 25, 2014 at 11:58

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

1 Comment

Royi Namir Over a year ago

what about val for the option ??

Jyoti Prakash · Accepted Answer · 2014-03-25 12:02:21Z

0

try it:

var data = [{
"Count": 0,
    "GroupId": 1,
    "Icon": null,
    "Service": [{
    "Count": 0,
        "Icon": null,
        "ServiceId": 1,
        "Type": "Cat"
}, {
    "Count": 0,
        "Icon": null,
        "ServiceId": 2,
        "Type": "Dog"
}, {
    "Count": 0,
        "Icon": null,
        "ServiceId": 3,
        "Type": "Whale"
}],
    "Type": "Animal carcass removal"
}];

for(var d in data){
   var service = data[d].Service;
   for(var i = 0;i < service.length;i += 1){
       console.log(service[i].type);
   }
}

answered Mar 25, 2014 at 12:02

Jyoti Prakash

1,2609 silver badges9 bronze badges

Collectives™ on Stack Overflow

Unable to loop through complex JSON object with Jquery

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related