时间戳

首页 > 解决方案 > 将字符串化的 JSON 数据呈现到表中

javascript - 将字符串化的 JSON 数据呈现到表中

问题描述

我正在尝试all document Names从本地 JSON 文件中显示。当我尝试渲染数据时，它出现了undefined.但是，在控制台中我可以看到数据。

据我所知，我的 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"}

标签： javascriptjqueryjsonfunction

解决方案

它是一个数组，因此您需要使用索引访问它的每个元素。此外，在 中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)
};

推荐阅读