How to loop a JSON

Question

I am getting JSON via ajax like this

{
    "questionTypes": [
        {
            "id": 1,
            "name": "text",
            "deleted": false,
            "version": 0
        },
        {
            "id": 2,
            "name": "rating",
            "deleted": false,
            "version": 0
        },
        {
            "id": 3,
            "name": "boolean",
            "deleted": false,
            "version": 0
        },
        {
            "id": 4,
            "name": "option",
            "deleted": false,
            "version": 0
        }
    ],
    "data": [
        {
            "id": 1,
            "category": "default",
            "question": "Staff Courtesy",
            "deleted": false,
            "version": 0
        },
        {
            "id": 2,
            "category": "default",
            "question": "Staff Response",
            "deleted": false,
            "version": 0
        },
        {
            "id": 3,
            "category": "default",
            "question": "Check In",
            "deleted": false,
            "version": 0
        },
        {
            "id": 4,
            "category": "default",
            "question": "Check Out",
            "deleted": false,
            "version": 0
        },
        {
            "id": 5,
            "category": "default",
            "question": "Travel Desk",
            "deleted": false,
            "version": 0
        },
        {
            "id": 6,
            "category": "default",
            "question": "Door Man",
            "deleted": false,
            "version": 0
        },
        {
            "id": 14,
            "category": "client",
            "question": "test question",
            "deleted": false,
            "version": 0
        },
        {
            "id": 15,
            "category": "client",
            "question": "test1",
            "deleted": false,
            "version": 0
        },
        {
            "id": 16,
            "category": "client",
            "question": "test2",
            "deleted": false,
            "version": 0
        },
        {
            "id": 17,
            "category": "client",
            "question": "test2",
            "deleted": false,
            "version": 0
        },
        {
            "id": 21,
            "category": "client",
            "question": "ggggg",
            "deleted": false,
            "version": 0
        }
    ]
}

I want to get the name fields from

"questionTypes": [
    {
        "id": 1,
        "name": "text",
        "deleted": false,
        "version": 0
    },
    {
        "id": 2,
        "name": "rating",
        "deleted": false,
        "version": 0
    },
    {
        "id": 3,
        "name": "boolean",
        "deleted": false,
        "version": 0
    },
    {
        "id": 4,
        "name": "option",
        "deleted": false,
        "version": 0
    }
],

$.each(data1.data.questionTypes, function(index, currPat) {

                   console.log(currPat.name); }

but it did not work ,I get undefined in console.Can any body tell me how to loop exactly

What is this username you're trying to print out? It looks like name in your JSON? — Evan Knowles
– Evan Knowles, Commented May 26, 2014 at 10:08
You have data and questionTypes on the same level on your json response, so why you're trying to get questionTypes as a child of data field, consequently, you have to do this: data1.questionTypes, you got undefined values because there's no field named questionTypes inside data field. — Fares M.
– Fares M., Commented May 26, 2014 at 10:25
@JqueryLearner i know, but this is not about using JSON or not, you're trying to access a field that doesn't exist on your JSON object hierarchy, so iterating data1.data.questionTypes will not give any values because it's undefined — Fares M.
– Fares M., Commented May 26, 2014 at 10:52

Bhavik · Accepted Answer · 2014-05-26 10:39:10Z

2

Demo Fiddle

jQuery

$.each(json.data, function (index, currPat) {
    $(tbody).append('<tr><td><b>Question from data: ' + currPat.question + '</b></td><td><b>Names from questionTypes</b><select class="qType"></select></td></tr>');
});

var select = $('.qType');
$(json.questionTypes).each(function (index, currPat) {
    $(select).append('<option>' + currPat.name + '</option>');
});

You must loop twice: Once for getting the question and then for getting name.

answered May 26, 2014 at 10:39

Bhavik

4,9044 gold badges32 silver badges45 bronze badges

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

2 Comments

SpringLearner Over a year ago

Thanks for the answer,+1.I will have a look

Bhavik Over a year ago

@JqueryLearner chat link..?

Runcorn · Accepted Answer · 2014-05-26 10:29:06Z

2

OK, you can do this ,

$(jsonObject.questionTypes).each(function(i,value){
     //get value here using value.name
     alert(value.name);
 });

And the problem was you were actually extracting questionTypes from datawhich is non existent there.

edited May 26, 2014 at 10:29

answered May 26, 2014 at 10:14

Runcorn

5,2245 gold badges36 silver badges52 bronze badges

Comments

Balachandran · Accepted Answer · 2014-05-26 10:16:40Z

0

Fiddle Demo

data has no questionTypes

$.each(data1.questionTypes, function(index, currPat) {

                      alert(currPat.name);


    });

answered May 26, 2014 at 10:16

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

2 Comments

Balachandran Over a year ago

@downvoters could you tell me the reason for downvote then only i rectify my error

SpringLearner Over a year ago

I need each row should be from data root so I did ` $.each(data1.data, function(index, currPat) { tRow += '<tr><td><input type="checkbox" class="cd" value=""/></td>'; tRow += '<td>'+currPat.question+'</td>';` and now each row should be having a drop down menu having options from questiontypes root

JegsVala · Accepted Answer · 2014-05-26 10:17:20Z

0

in your code I don't see any username properties, try to use this code.

$.each(data1.data.questionTypes, function(index, currPat) {

               console.log(currPat.name); }

answered May 26, 2014 at 10:17

JegsVala

1,8771 gold badge20 silver badges27 bronze badges

Comments

Rupam Datta · Accepted Answer · 2014-05-26 10:48:49Z

0

Try this

$.each(json.questionTypes, function (index, currPat) {
    div=$('<div/>').text(currPat.name);
    $('#jsoncontainter').append(div);
});

http://jsfiddle.net/ardeezstyle/497Tx/1/

For your second part of the problem, here is a solution.

$.each(json.data, function (index, currQuest) {
    question=$('<div/>',{'class':'question'}).text(currQuest.question);
    answer=$('<div/>',{'class':'answer'});
    dropdown=$('<select/>');
    $.each(json.questionTypes, function (index, currPat) {
        option=$('<option/>').text(currPat.name).appendTo(dropdown);
    });
    answer.append(dropdown);
    $('#jsoncontainter').append(question).append(answer);
});

Fiddle

edited May 26, 2014 at 10:48

answered May 26, 2014 at 10:17

Rupam Datta

1,8891 gold badge21 silver badges37 bronze badges

4 Comments

SpringLearner Over a year ago

I want to show question from data root as row and each row should be having one drop down and that drop will have options from questionType.So how to do?

Rupam Datta Over a year ago

What is data root? Can you create a fiddle with the JSON assuming you are creating the question and dropdown options from the JSON.

SpringLearner Over a year ago

under data you will find questions like Staff Courtesy,test2 .... .So this will be row

SpringLearner Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

How to loop a JSON

5 Answers 5

2 Comments

Comments

2 Comments

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

4 Comments

Related