动态创建的 div 不显示列内的值

Question

我正在学习 vanilla js。我正在尝试从动态 JSON 对象创建动态 HTML 表。

我有如下所示的嵌套对象：

{
  "_embedded" : {
    "softwares" : [ {
      "createdBy" : "System",
      "createdDate" : "2015-12-31T05:00:00.000+00:00",
      "lastModifiedBy" : "System",
      "lastModifiedDate" : "2023-12-31T05:00:00.000+00:00",
      "id" : 21,
      "softwarename" : "AWS16",
      "softwareprovider" : "AMAZON",
      "softwareprovidercontactemail" : "[email protected]",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/softwares/21"
        },
        "appSoftware" : {
          "href" : "http://localhost:8080/softwares/21"
        }
      }
    }, ...... ]
  },
  "_links" : {
    "first" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=0&size=5"
    },
    "self" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=0&size=5"
    },
    "next" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=1&size=5"
    },
    "last" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=4&size=5"
    }
  },
  "page" : {
    "size" : 5,
    "totalElements" : 21,
    "totalPages" : 5,
    "number" : 0
  }
}

这是我从不同的 SO 线程的帮助中得到的内容。

HTML：

<button id="theButton"> GetData </button>
<div id="tableContainer"></div>

JavaScript：

const button = document.querySelector('#theButton');
button.addEventListener('click', fetchData, false);

function fetchData() {
    button.textContent = 'Loading...';
    button.disabled = true;
    const outputElement = document.getElementById("output");
    setTimeout(() => {
        fetch('/softwares/search/softwarenameContaining?softwarename=')
            .then(response => response.json())
            .then(data => {
                //console.log(data);
                // Re-oder the data map
                let myData = data._embedded.softwares.map(function (x) {
                    return {
                        id: x.id,
                        softwarename: x.softwarename,
                        softwareprovider: x.softwareprovider,
                        softwareprovidercontactemail: x.softwareprovidercontactemail,
                        createdBy: x.createdBy,
                        createdDate: x.createdDate,
                        lastModifiedBy: x.lastModifiedBy,
                        lastModifiedDate: x.lastModifiedDate,
                        _links: x._links
                    }
                });
                createTable(myData);
            })
            .catch(error => console.error(error));
    }, 500);

}

function createTable(jsonData) {
    let container = document.getElementById("tableContainer");
    let table = document.createElement("table");
    let cols = Object.keys(jsonData[0]);
    let thead = document.createElement("thead");
    let tr = document.createElement("tr");
    cols.forEach((item) => {
        let th = document.createElement("th");
        th.innerText = item;
        tr.appendChild(th);
    });
    thead.appendChild(tr);
    table.append(tr);

    jsonData.forEach((item) => {
        let tr = document.createElement("tr");
        let vals = Object.values(item);
        vals.forEach((elem) => {
            let td = document.createElement("td");
            td.innerText = elem;
            for (let key in elem) {
                if (elem.hasOwnProperty(key) && (typeof elem[key] === "object")) {
                    console.log("key : " + key + ">>  Value:" + elem[key]);
                    let theDiv = document.createElement("div");
                    //theDiv.innerHTML="href : " + elem.self.href + " appSoftware: " + elem.appSoftware.href  ; // Does not work
                    //theDiv.innerHTML=nestedJsonIterator(elem); // Does not work shows object Object
                    //theDiv.textContent=nestedJsonIterator(elem); // Does not work
                    td.textContent = "self : " + elem.self.href + " appSoftware: " + elem.appSoftware.href;
                }
            }

            tr.appendChild(td);

        });
        table.appendChild(tr);
    });
    container.appendChild(table);
    button.remove();
}


function nestedJsonIterator(obj) {
    let text = "";
    for (let key in obj) {
        if (obj.hasOwnProperty(key) && (typeof obj[key] === "object")) {
            nestedJsonIterator(obj[key])
        } else {
            //console.log("key : " + key + ">>  Value:" + obj[key]);
            text += "key:" + key + " Value:" + obj[key] + "";
        }
    }
    return text;
}

由于

_links

是 Softwares 数组中的嵌套对象，我尝试将单独的 div 放入表的链接列中。对于新创建的 div，我想知道为什么 theDiv.innerHTML 和 theDiv.textContent 不起作用。

td.textContent

效果很好。我也尝试迭代嵌套的 JSON，但表显示为空白。我在这里遗漏了什么或做错了什么？

Answer 1

所以这就是答案

我想知道为什么 theDiv.innerHTML 和 theDiv.textContent 不起作用。

当循环遍历每个软件条目的值时，该值可以是对象或字符串

现在你首先用 elem 在 td.innerText 中写入

                td.innerText = elem;

当 elem 是一个对象时，它将写入 [object object] （导致错误），当它是一个字符串时，它将写入该字符串（如预期）。

之后再次循环 elem 对象的值以获得嵌套链接 执行此操作的代码非常好， 但如果你执行以下操作，则在循环内部

let theDiv = document.createElement("div");
theDiv.innerHTML="href : " + elem.self.href + " appSoftware: " + elem.appSoftware.href  ; 
theDiv.textContent="href : " + elem.self.href + " appSoftware: " + elem.appSoftware.href  ; 
td.appendChild(theDiv);

调用 td.appendChild(theDiv);将添加新的子元素，但不会覆盖 [object object] 字符串

为了解决这个问题，我们可以简单地覆盖 td.innerText 值 使用空字符串（这就是它与 td.textContent 一起使用的原因，因为它会覆盖 [object object] 字符串）。 这是 createTable 函数的更正代码。

         function createTable(jsonData) {

        let container = document.getElementById("tableContainer");
        let table = document.createElement("table");
        let cols = Object.keys(jsonData[0]);
        let thead = document.createElement("thead");
        let tr = document.createElement("tr");
        cols.forEach((item) => {
            let th = document.createElement("th");
            th.innerText = item;
            tr.appendChild(th);
        });
        thead.appendChild(tr);
        table.append(tr);

        jsonData.forEach((item) => {
            let tr = document.createElement("tr");
            let vals = Object.values(item);
            vals.forEach((elem) => {
                let td = document.createElement("td");
                td.innerText = elem;
                for (let key in elem) {
                    if (elem.hasOwnProperty(key) && (typeof elem[key] === "object")) {
                        //clear the [object object] string
                        td.innerText = '';
                        let theDiv = document.createElement("div");
                        theDiv.innerHTML="href : " + elem.self.href + " appSoftware: " + elem.appSoftware.href  ; // Does not work
                        td.appendChild(theDiv);
                    }
                }

                tr.appendChild(td);

            });
            table.appendChild(tr);
        });
        container.appendChild(table);
        button.remove();
    }

我希望这对你有帮助:)