从 JSON 获取值到 HTML答案

【问题标题】：Get value from JSON into HTML从 JSON 获取值到 HTML
【发布时间】：2019-07-15 18:58:52
【问题描述】：

function callLink(imageId) {
        $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
            console.log(data);
        });
    }

我运行上面代码时的 JSON 结果是

[
   {
      FileName:"10012816.jpeg"      ID:2591      TicketID:"10012816"
   },
   {
      FileName:"1562754508233.jpeg"      ID:2591      TicketID:"10012816"
   }
]

如何从上面的 JSON 中获取结果并放入 html 代码。像这样

    @foreach (var item in data) {
//html code
<h6 class="mb-3">@item.FileName</h6>
...
<span class="badge badge-success r-30"><i class="icon-check mr-2"></i>@item.ID</span>

    }

【问题讨论】：

您使用什么模板语言？模板是在后端（在服务器上）还是在浏览器中呈现？
我建议您了解 DOM 和允许您操作它的 JavaScript 函数。
@PatrickHund 就在浏览器中。我正在将 MVC 与 HML 和 JS 一起使用
你确定吗？ @foreach 和 @item 看起来像 .net / ASP / Razor
var json = JSON.parse(data); json[0].FileName json[1].FileName

标签： javascript json

【解决方案1】：

您已经提供了伪代码，

function callLink(imageId) {
    // as you are using `.getJSON` it's already formatted and you don't need `JSON.parse()`
    $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
        let output = '';
        for(let i = 0; i < data.length; i++) {
            output += `<h6 class="mb-3">${data[i].fileName}</h6>`;
            output + = `..`;
            output + = `<span class="badge badge-success r-30"><i class="icon-check mr-2"></i>${data[i].ID}</span>`
        }
        // or some more useful code, like $(selector).html(output);
        alert(output);
    });
}

【讨论】：

【解决方案2】：

创建一些 html div

<div id="images-info"></div>

将请求的数据附加到 div 中

function callLink(imageId) {
    $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
        for (var i = 0; i < data.length; i++) {
            $('#images-info').append('<div><h6 class="mb-3">'+ data[i].FileName +'</h6><span class="badge badge-success r-30"><i class="icon-check mr-2"></i>'+ data[i].ID +'</span></div>');
        }
    });
}

【讨论】：

DOM 更改代价高昂。最好在内存中拼接，然后将最终结果追加到 DOM 中