CODEWITHSUNDEEP
jqueryajaxjsoneach
Gublooo
Gublooo

Reputation: 2618

How to display JSON data containing arrays using Jquery

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

Upvotes: 1

Views: 6351

Answers (3)

Thulasiram
Thulasiram

Reputation: 8552

<!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>

Upvotes: 2

ilyes kooli
ilyes kooli

Reputation: 12043

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

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

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
});

Upvotes: 3

Related Questions