How to display JSON data containing arrays using Jquery

Question

This is the JSON that is returned from my PHP

{
"17":{"answer_id":"17","answer":"You earn a salary","is_correct":"N"},
"18":{"answer_id":"18","answer":"You earn profit","is_correct":"N"},
"19":{"answer_id":"19","answer":"You invest money","is_correct":"N"},
"20":{"answer_id":"20","answer":"All of the above.","is_correct":"Y"}
}

So I basically need to loop through this and display them as radio button options. But I'm stuck - I checked out this solution jQuery $.each loop and json data

But that is just one array and also the other issue I have is with the key being a number.

Any help will be appreciated

Thanks

How do you want to map the JSON data to the radio button? (what do you want to become the radio buttons ID, value, name, label etc?) — Matt
– Matt, Commented May 4, 2012 at 14:14
You might find it easier/simpler/just as effective to have PHP output the HTML and use $('#target_element').load() instead. — DaveRandom
– DaveRandom, Commented May 4, 2012 at 14:17

thecodeparadox · Accepted Answer · 2012-05-04 14:17:18Z

3

var ret = {
"17":{"answer_id":"17","answer":"You earn a salary","is_correct":"N"},
"18":{"answer_id":"18","answer":"You earn profit","is_correct":"N"},
"19":{"answer_id":"19","answer":"You invest money","is_correct":"N"},
"20":{"answer_id":"20","answer":"All of the above.","is_correct":"Y"}
};

$.each(ret, function(key, value) {

   var radio_with_label = $('<label for="'+ value.answer_id +'">'+ value.answer +'</label><input name="'+ key +'" id="'+ value.answer_id +'" type="radio" value="'+ value.is_correct+'">');

   $(TARGET).append(radio_with_label); // TARGET -> any valid selector container to radios
});

answered May 4, 2012 at 14:17

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

3 Comments

Gublooo Over a year ago

Thank you for the quick response - worked perfectly :) - I had spent 2 hours figuring that out

daniel0mullins Over a year ago

Be careful here, as you will be generating ids that begin with a number, which is not technically allowed (although for most browsers it works just fine, except IE of course). You may wish to prepend some character data: 'id_', that will give you valid markup.

Gublooo Over a year ago

Thanks Daniel - I did prepend answerid_ - but thanks for pointing out

ilyes kooli · Accepted Answer · 2012-05-04 14:28:52Z

2

var data = {
    "17": {
        "answer_id": "17",
        "answer": "You earn a salary",
        "is_correct": "N"
    },
    "18": {
        "answer_id": "18",
        "answer": "You earn profit",
        "is_correct": "N"
    },
    "19": {
        "answer_id": "19",
        "answer": "You invest money",
        "is_correct": "N"
    },
    "20": {
        "answer_id": "20",
        "answer": "All of the above.",
        "is_correct": "Y"
    }
}

$.each(data, function(key, value) {
    $('#content').append('<input id="rad-'+key+'" type="radio" name="contnet" value="'+key+'"><label for="rad-'+key+'">'+value.answer+'</label><br>');
});

DEMO

answered May 4, 2012 at 14:28

ilyes kooli

12.1k14 gold badges55 silver badges81 bronze badges

2 Comments

ilyes kooli Over a year ago

here I don't care about the is_correct value, because is not clear what you want to de with it.

Gublooo Over a year ago

Thanks for the demo - the first solution worked - so accepted that answer. Thanks for the time

Thulasiram · Accepted Answer · 2012-05-04 14:30:37Z

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = {
                "17": { "answer_id": "17", "answer": "You earn a salary", "is_correct": "N" },
                "18": { "answer_id": "18", "answer": "You earn profit", "is_correct": "N" },
                "19": { "answer_id": "19", "answer": "You invest money", "is_correct": "N" },
                "20": { "answer_id": "20", "answer": "All of the above.", "is_correct": "Y" }
            };

            $.each(data, function (i, entity) {
                $('#radioButtonList').append($('<input />', { 'type': 'radio', 'name': 'answerRadioButtonList', 'id': entity.answer_id, 'value': entity.is_correct })).append(entity.answer + '<br />');
            });

            $('#radioButtonList').find(':radio').live('click', function () {
                if ($(this).val() === 'Y') {
                    alert('Correct Answre.');
                }
            });
        });
    </script>
</head>
<body>
    <div id="radioButtonList">
    </div>
</body>
</html>

answered May 4, 2012 at 14:30

Thulasiram

8,5628 gold badges48 silver badges54 bronze badges

1 Comment

Gublooo Over a year ago

Thanks for the answer - and for creating the demo - appreciate your time - I've given you an up vote - but accepted the first answer as that worked too - Thanks again

Collectives™ on Stack Overflow

How to display JSON data containing arrays using Jquery

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related