通过 Ajax 返回后，如何将 JSON 对象列表中的值打印到 div？答案

【问题标题】：How can I print the values from a list of JSON objects to a div after being returned via Ajax?通过 Ajax 返回后，如何将 JSON 对象列表中的值打印到 div？
【发布时间】：2018-06-05 04:12:31
【问题描述】：

我可以通过 Ajax 调用成功返回对象列表，并且可以在控制台中看到它们：

如何遍历每个对象（在上面的示例中有 1 个），然后将其中一个值（即下面的 notificationText）打印到一系列 div？

JQuery/Ajax：

<script>
    function LoadReplies(convoMessageId) {
        $('#test123').html('<i class="fas fa-circle-notch fa-spin"></i>');
        console.log("Message ID: " + convoMessageId);
        $.ajax({
            type: "POST",
            url: "Index?handler=Replies",
            headers: {
                "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            contentType: "application/json; charset=utf-8",
            data: convoMessageId,
            success: function (response) {
                console.log(JSON.stringify(response));
                $('#convo' + convoMessageId).modal('show');
                $.each(response, function (idx, obj) {
                    console.log(obj[0].value);
                    $("#test123").html(obj[0].value);
                });
            },
            failure: function (response) {
                // console.log(response);
            }
        });
    }
</script>

JSON 列表：

我现在可以检索我想要的值，但它不会呈现到 div：

$("#test123").html(obj[0].value);

【问题讨论】：

执行console.log(JSON.stringify(response)); 并将其添加到问题而不是图像中。当您看到该输出时，您可能能够解决您的问题:)
@Shyju 我取得了一些进展，但似乎没有渲染到 div？
@Shyju 哦，没关系。那是一个html问题。 id 为 test123 的 div 不止一个（没有意识到它在模板循环中）。现在一切正常！

标签： asp.net json ajax asp.net-mvc

【解决方案1】：

请记住，Div 将仅显示 HTML，您必须从 JSON 或数据中生成 HTML 字符串。例如在你的成功回调函数中，我会做最简单的如下：

var generatedHtml = ['<dl>'];
$.each(response, function (idx, obj) {
    generatedHtml.push(`<dt>label1:</dt> <dd>${obj[idx].prop1}</dd> <dt>label2:</dt>${obj[idx].prop2}</dd>`);
});
generatedHtml.push('</dl>');
$("#test123").html(generatedHtml.join(''));

我自己没有测试过，但是应该可以的...

【讨论】：

谢谢！这非常有效。
顺便说一句，你如何访问嵌套对象？例如，${obj[1]["username"].value}?
如果您只需要嵌套对象的一些属性，那么您可以直接访问它们，就像您提到的那样。否则，您可以迭代嵌套对象的键，并在迭代中获取它们的值。例如：$.each(Object.keys(obj[idx]), function(keyIndex, key){ console.log(obj[idx][key]);})
如果您只需要嵌套对象的一些属性，那么您可以直接访问它们，就像您提到的那样。否则，您可以迭代嵌套对象的键，并在迭代中获取它们的值。例如：$.each(Object.keys(obj[idx]), function(keyIndex, key){ console.log(obj[idx][key]);})
@Naddem Jamali 当我执行obj[1][username].value 或`obj[1]["username"].value` 之类的操作时，我不断收到ReferenceError: username is not defined[Learn More]。它似乎不起作用......