javascript - 将字符串化的 JSON 数据渲染到表中

Question

我正在尝试显示本地 JSON 文件中的所有文档名称。当我尝试渲染数据时，它显示为未定义。但是，在控制台中我可以正常看到数据。

据我所知，我的 for 循环看起来很好，所以我想知道问题的根源是否在于 "Titles": obj.File.Name。除此之外，我不确定。

<小时/>

JS 文件:

loadTableData() {
    let tableRes = redactedName.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {

      return {
        // "FileName": obj.FileLeafRef,
        // "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name
        }
      });

    let allTitles = tableRes;

    for (var i = 0; i < allTitles.length; i++) {
      let tr = $("<tr/>");
        $(tr).append("<td>" + allTitles.Name + "</td>");
        $("#km-table-id").append(tr)
    };
}

<小时/>

JSON 片段

{
  "d": {
    "results": [
      {
        "__metadata": {
          ...
        },
        "File": {
          "__metadata": {
            ...
          },
          "Name": "Guide to Product IDs.docx" <---------------------------
        },
        "FileLeafRef": "Guide to Product IDs.docx",
        "ResourceType": {
          ...
          },
          "results": [
            {
              ...
            }
          ]
        },
        "EncodedAbsUrl": [redacted]
      },
...
...

<小时/>

这是我在控制台中看到的示例:

(491) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
0: {Titles: "Guide to Product IDs.docx"}
1: {Titles: "Template 1.docx"}

Answer 1

它是一个数组，因此您需要使用索引访问它的每个元素。此外，在 map 中，您返回 Titles 属性。所以应该是:

for (var i = 0; i < allTitles.length; i++) {
    let tr = $("<tr/>");
    $(tr).append("<td>" + allTitles[i].Titles + "</td>"); //Change in this line
    $("#km-table-id").append(tr)
};