Javascript 使用JSON数组中的某些项填充HTML表

我有一个JSON数组，如下所示：

[
{
    "_id": "5c3296f4c7728833bf7cf334",
    "title": "Update styling",
    "content": "Don't forget to update the styling on the website",
    "category": "Cat2",
    "createdAt": "2019-01-07T00:01:56.375Z",
    "updatedAt": "2019-01-07T00:01:56.375Z",
    "__v": 0
}
]

我想用标题、内容和类别字段填充html表。目前，我正在使用以下代码填充表，但它会将每个字段放入表中，而不是我想要的字段

const data=[{{u id:5c3296f4c7728833bf7cf334，标题：更新样式，内容：别忘了在网站上更新样式，类别：Cat2，createdAt:2019-01-07T00:01:56.375Z，更新日期：2019-01-07T00:01:56.375Z，{u v:0}] const axios={get:s=>Promise.resolve{data}； window.addEventListener'load'，函数{ axios，快http://localhost:2672/categories“.然后是我的类别{ //提取HTML头的值。 var col=[]； 对于变量i=0；i

col = col.filter((data) => {
    return data === 'title' || data === 'content' || data == 'category';
});

或者，您可以在for循环中使用简单的if语句进行过滤，如下所示：

var col = [];
for (var i = 0; i < myCategories.data.length; i++) {
    for (var key in myCategories.data[i]) {
        if (col.indexOf(key) === -1 && (key === 'title' || key === 'content' || key == 'category')) {
            col.push(key);
        }
    }
}

使用和

const data=[{{u id:5c3296f4c7728833bf7cf334，标题：更新样式，内容：别忘了在网站上更新样式，类别：Cat2，createdAt:2019-01-07T00:01:56.375Z，更新日期：2019-01-07T00:01:56.375Z，{u v:0}] const res=data.map{title，content，category}=>{ 返回` ${title} ${content} ${category} `; }.加入； const table=document.createElementtable； table.innerHTML=标题内容类别； table.innerHTML+=res； document.body.appendChildtable； 表，tr，th，td{ 边框：1px纯黑； 边界塌陷：塌陷； } th{ 颜色：白色； 背景颜色：灰色； } td，th{ 填充：10px 5px； } const axios={get:s=>Promise.resolve{data:[{{u id:5c3296f4c7728833bf7cf334，标题：更新样式，内容：别忘了更新网站上的样式，类别：Cat2，createdAt:2019-01-07T00:01:56.375Z，更新日期：2019-01-07T00:01:56.375Z，{u v:0}}； 函数getSelectColumns{ const selected=document.querySelectorAll'headers选项：选中'； 返回Array.fromselected.reduceall，el=>{ 返回{…all[el.value]：el.text} }, {}; } // --------------------- 函数createTabledata，列={ 标题：“标题”，内容：“内容”，类别：“类别” } { const headerCells=Object.valuescolumns.mapval=>`${val}`； const headerRow=`${headerCells.join}`； const dataRows=data.mapobj=>{ return Object.keyscolumns.mapkey=>{ 返回`${obj[key]| `-'}`； }.加入； }; 返回`${headerRow+dataRows.join}`； } 函数loadDataAndTable{ 返回axios，获取'http://localhost:2672/categories“.thenres=>{ const div=document.getElementByIdshowCategories； div.innerHTML=createTableres.data，getSelectColumns； }; } addEventListener'load'，=>loadDataAndTable； 桌子{ 文本对齐：左对齐； } th，td{ 填充物：5px10px； } th{ 背景：灰色； 颜色：白色； } 按住shift键并选择表中所需的列

标题 所容纳之物 类别

---

太棒了，本，真是太棒了！有没有什么方法可以改变表中标题的名称，使它们看起来更漂亮，而不是小写的标题、内容和类别？谢谢Callam，我唯一的问题是我正在使用webpack，并且我不断得到引用错误：regeneratorRuntime未定义。知道为什么吗？@Frink我想这是异步/等待语法，试着取消承诺