Gewusst wie: anzeigen von JSON-Daten mit arrays mit Jquery

Dies ist die JSON zurückgegeben wird, die über mein PHP

{ 
"17":{"answer_id":"17","Antwort":"Sie verdienen ein Gehalt","is_correct":"N"}, 
"18":{"answer_id":"18","Antwort":"Sie verdienen profit","is_correct":"N"}, 
"19":{"answer_id":"19","Antwort":"Ihr Geld investieren","is_correct":"N"}, 
"20":{"answer_id":"20","Antwort":"Alle der oben genannten.","is_correct":"Y"} 
}

Also habe ich im Grunde benötigen, um eine Schleife durch diese und zeigt Sie als radio-button Optionen.
Aber ich bin stecken - ich habe diese Lösung
jQuery $.jedes loop-und json-Daten

Aber das ist nur ein array und auch das andere Problem das ich habe ist mit dem Schlüssel eine Zahl.

Jede Hilfe wird dankbar sein

Dank

  • Wie willst du anzeigen von JSON-Daten auf den radio-button? (was willst du werden die radio-buttons-ID, Wert, name, Beschriftung etc?)
  • was wird im markup-Code für Ihr radio-buttons?
  • Sie finden es möglicherweise einfacher/einfacher/genauso effektiv zu PHP Ausgabe von HTML und die Verwendung $('#target_element').load() statt.
InformationsquelleAutor Gublooo | 2012-05-04
  1. 2
    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
});
    • Danke für die schnelle Antwort - funktioniert perfekt 🙂 - ich verbrachte 2 Stunden herauszufinden, dass heraus
    • Hier vorsichtig sein, da Sie die Erzeugung ids, die mit einer Zahl beginnen, das ist technisch nicht zulässig (obwohl bei den meisten Browsern funktioniert es ganz gut, außer dem IE natürlich). Möchten Sie vielleicht voranstellen einige Charakter-Daten: 'id_', geben Sie gültiges markup.
    • danke..
    • Danke Daniel - habe ich voranstellen answerid_ - aber danke für den Hinweis
    InformationsquelleAutor thecodeparadox
  2. 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

    • hier, ich don ' T care über die is_correct Wert, weil nicht klar ist, was Sie wollen de mit ihm.
    • Vielen Dank für die demo - die erste Lösung gearbeitet - so akzeptiert, dass Antwort. Danke für die Zeit
    InformationsquelleAutor ilyes kooli
  3. 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>
    • für die live-demo finden Sie unter diesem link: jsfiddle.net/nanoquantumtech/xMgfq
    • Danke für die Antwort - und für die Erstellung der demo - schätzen Ihre Zeit - ich habe Ihnen einen up-vote - aber angenommen die erste Antwort so gut geklappt - nochmals vielen Dank
    InformationsquelleAutor Thulasiram
Schreibe einen Kommentar