如何在 HTML 中显示返回的 ajax Json 结果（使用打字稿）答案

【问题标题】：How to display the returned ajax Json results in HTML (using typescript)如何在 HTML 中显示返回的 ajax Json 结果（使用打字稿）
【发布时间】：2015-08-25 16:36:34
【问题描述】：

客户端（typescript）从服务端得到不同的结果，都是json格式。有时是简单的 json 结果，有时是复杂的嵌套 json。

我需要在一个（非常）简单的 html 表格中呈现结果。

function run(): void {
var url = this.selectedKnockoutDropList(); 

$.ajax(url, "GET").done(data => {
    console.log(data);

    *** here I want to do something like : 
        - open/embedd results.html
        - fill a table with the json results parsed somehow
});

我试过 $('#...).html(data) 没有成功。

【问题讨论】：

标签： html ajax json typescript

【解决方案1】：

您需要将 JSON 转换为有意义的 HTML。这可以在打字稿、javascript 中完成。它可以使用 jQuery 来完成，也可以使用诸如把手之类的 javascript 模板来完成。可以使用 Angular 等 SPA 框架来完成。

请发布返回的 JSON 示例，我可以使用不使用任何工具集或库的 TypeScript 示例进行更新。

【讨论】：

【解决方案2】：

JSON 是一个对象。要将其输出到文档中，您需要先将其转换为字符串：

$.ajax(url, "GET").done(data => {
  $('#...).html(JSON.stringify(data));
}

但是，如果您知道要返回的数据类型并只想输出其中的一部分，则需要循环 JSON。例如，如果您有一个 JSON 对象，例如：

[
   {name: "Joe", age: 32},
   {name: "Suzy", age 23},
   {name: "Tom", age 28}
]

你可以这样输出名字：

$.ajax(url, "GET").done(data => {
   data.forEach(function(person) {
      $(ul).append('<li>' + person.name + '</li>');
   });
}

【讨论】：

【解决方案3】：

Martin 和 Robert - 感谢您的快速回复。我采纳了您的建议并提供了以下通用解决方案（可以显示从服务器返回的 html 文本或表格中的嵌套 json 对象）：

HTML：

    <!--HTML-->        
    <div data-bind="visible: isHtml, html: htmlView"></div>

    <!--SIMPLE JSON-->
    <div data-bind="visible: isJson">
        <table>
            <thead>
                <tr data-bind="foreach: columns"> 
                    <th data-bind="text: $data"></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: rows">
                <tr data-bind="foreach: $parent.columns">
                    <td data-bind="text: $parent[$data]"></td>
                </tr>
            </tbody>
        </table>
    </div>

TS：

function run(): void {
this.isHtml(false);
this.isJson(false);

$.ajax(url, "GET").done(data => {
    var jsonObj = data;

    if (typeof (data) === "string") {
        this.htmlView(data);
        this.isHtml(true);
        return;
    }

    if (data instanceof Array === false) {
        jsonObj = [data];
    }

    this.columns([]);
    this.rows([]);

    for (var i = 0; i < jsonObj.length; i++) {

        var item = jsonObj[i];
        var newItem = {};        

        for (var key in item) {
            if (i === 0)
                this.columns.push(key);

            if (typeof item[key] !== "object") {
                newItem[key] = item[key];
            } else {
                for (var deeperKey in item[key]) {
                    this.columns.push(deeperKey);
                    newItem[deeperKey] = item[key][deeperKey];
                }
            }
        }
        this.rows.push(newItem);
    }
    this.isJson(true);
});

我对嵌套行使用了另一个 stackoverflow 帖子（我现在找不到）。显然，扁平化子行不是我想要的，但它可以很容易地改变。

这是我的第一个 typescript/html 程序 :)

再次感谢！

【讨论】：