如何使用 Jquery 显示包含数组的 JSON 数据答案

【问题标题】：How to display JSON data containing arrays using Jquery如何使用 Jquery 显示包含数组的 JSON 数据
【发布时间】：2012-05-04 22:30:37
【问题描述】：

这是从我的 PHP 返回的 JSON

{ "17":{"answer_id":"17","answer":"你挣工资","is_correct":"N"}, "18":{"answer_id":"18","answer":"您赚取利润","is_correct":"N"}, "19":{"answer_id":"19","answer":"你投资了钱","is_correct":"N"}, "20":{"answer_id":"20","answer":"以上所有。","is_correct":"Y"} }

所以我基本上需要遍历这个并将它们显示为单选按钮选项。但我被困住了 - 我检查了这个解决方案 jQuery $.each loop and json data

但这只是一个数组，我遇到的另一个问题是键是数字。

任何帮助将不胜感激

谢谢

【问题讨论】：

您想如何将 JSON 数据映射到单选按钮？（你想成为单选按钮 ID、值、名称、标签等什么？）
单选按钮的标记是什么？
您可能会发现让 PHP 输出 HTML 并改用 $('#target_element').load() 会更容易/更简单/同样有效。

标签： jquery ajax json each

【解决方案1】：

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

【讨论】：

感谢您的快速响应 - 效果很好 :) - 我花了 2 个小时才弄清楚
这里要小心，因为您将生成以数字开头的ids，这在技术上是不允许的（尽管对于大多数浏览器来说它工作得很好，当然除了 IE）。您可能希望添加一些字符数据：'id_'，这将为您提供有效的标记。
谢谢丹尼尔 - 我确实预先添加了 answerid_ - 但感谢您指出

【解决方案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

【讨论】：

这里我不关心 is_correct 值，因为不清楚你想用它来做什么。
感谢演示 - 第一个解决方案有效 - 所以接受了这个答案。感谢您的时间

【解决方案3】：

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

【讨论】：

感谢您的回答 - 以及创建演示 - 感谢您的时间 - 我给了您一个赞成票 - 但接受了第一个答案，因为它也有效 - 再次感谢