Javascript 尝试访问json内容并以网格方式显示_Javascript_Json_Angular_Dom

Javascript 尝试访问json内容并以网格方式显示

javascript json angular dom

Javascript 尝试访问json内容并以网格方式显示,javascript,json,angular,dom,Javascript,Json,Angular,Dom,我有一个包含以下内容的JSON文件 { "rooms":[ { "id": "1", "name": "living", "Description": "The living room", "backgroundpath":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrsU8tuZWySrSuRYdz72WWFiYaW5PCMIwPAPr_xA

我有一个包含以下内容的JSON文件

{
    "rooms":[
      {
        "id": "1",
        "name": "living",
        "Description": "The living room",
         "backgroundpath":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrsU8tuZWySrSuRYdz72WWFiYaW5PCMIwPAPr_xAIqL-FgmQ4qRw",       
         "Settings": {
          "Sources": [
            {
              "srcname":["DirectTV","AppleTV","Sonos"],
              "iconpath":["src/assets/images/ThemeEditorImgLib_iTVLight5d3a46c1ad5d7796.png","path2"]
            }
            ],
          "hex": "#000"
          }
      },
      {
        "id": "2",
        "name": "dining",
        "Description": "The Dining room",
        "backgroundpath":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjjspDkQEzbJJ1sSLS2ReWEx5P2ODNQmOtT572OIF9k3HbTGxV",
        "Settings": {
          "Sources": [
            {
              "srcname":["Climate","Shades"],
              "iconpath":["path1","path2"]
            }
            ],
          "hex": "#000"
        }
      }
]
}

我的HTML文件有：

<div class="roww">
<div class="col-md-4 col-sm-6 col-12">

</div>
 </div>

我想在HTML中显示我的JSON内容。到目前为止，我已经尝试了以下方法

private initTileGrid():void
  {

    var col = document.getElementsByClassName("roww")[0];

    var outeritems=this.room_list.rooms;
   // console.log(outeritems);
    for(var i=0;i<outeritems.length;i++){
      var tile = document.getElementsByClassName("col-md-4 col-sm-6 col-12 tile no-padding")[0];
     var outerdiv = document.createElement("div");
      var h5 = document.createElement("h5");
      h5.innerHTML = outeritems[i].Description;
      outerdiv.appendChild(h5);
      var p = document.createElement("p");
      p.innerHTML = outeritems[i].name;
      outerdiv.appendChild(p);
     // col.appendChild(outerdiv);
      tile.appendChild(outerdiv);
      var inneritem=outeritems[i].Settings.Sources.srcname;
      console.log(inneritem);
      var innerdiv = document.createElement("div");
      for(var j=0;j<inneritem.length;j++)
      {
        console.log("hi")
        var h5inner = document.createElement("h5");
        h5inner.innerHTML = inneritem.srcname; 
        console.log(h5inner);
        innerdiv.appendChild(h5inner);
      }
tile.appendChild(innerdiv);
    }

我能够显示json中的描述和名称，但无法获取源列表

我的最终解决方案应该是一个网格，其分片数量等于JSON中的对象数量，每个分片都有一个来自JSON及其内容的背景图像

谁能告诉我哪里出了问题？感谢您的帮助

我建议并推荐使用以下方法生成动态HTML

使用，以及

const data={rooms:[{id:1，名称：living，描述：客厅，背景路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrsU8tuZWySrSuRYdz72WWFiYaW5PCMIwPAPr_xAIqL-FgmQ4qRw，设置：{Sources:[{srcname:[DirectTV，AppleTV，Sonos]，iconpath:[src/assets/images/ThemeEditorImgLib_iTVLight5d3a46c1ad5d7796.png，path2]}]，十六进制：000}，{id:2，名称：餐厅，描述：餐厅，背景路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjjspDkQEzbJJ1sSLS2ReWEx5P2ODNQmOtT572OIF9k3HbTGxV，设置：{Sources:[{srcname:[Climate，Shades]，iconpath:[path1，path2]}，hex:000}]} const res=data.rooms.map{name，Description，Settings:{Sources}}=>{ const inner=Sources.map{srcname}=>{ 返回srcname.mapsrc=>`${src}`.join； }.加入；返回` ${Description} ${name}

${inner} ` }.加入； document.body.innerHTML=res； body>div{background color:lightgrey；padding:5px；margin top:5px}body>div:：before{content:row}body>div>*{margin left:10px}h5{background color:blue；color:white；padding:5px}h5:：before{content:outer h5:：}p{背景色：紫色；color:white；padding:5px}p:：before{content:p:}content:p:}div{content:internal div}div.inner>h5{背景色：绿色；颜色：白色}div.inner>h5:：在{content:internal h5:：}之前我建议并推荐使用以下方法生成动态HTML

使用，以及

${inner} ` }.加入； document.body.innerHTML=res；

body>div{background color:lightgrey；padding:5px；margin top:5px}body>div:：before{content:row}body>div>*{margin left:10px}h5{background color:blue；color:white；padding:5px}h5:：before{content:outer h5:：}p{背景色：紫色；color:white；padding:5px}p:：before{content:p:}content:p:}div{content:internal div}div.inner>h5{background color:green；color:white}div.inner>h5:：before{content:internal h5:：}您的主要问题从这一行开始var inneritem=outeritems[i].Settings.Sources.srcname；Sources是一个数组，因此需要像Sources[j]一样访问它，其中j是数组长度内的一个数字

内部循环很好，您只需要正确地循环源

我还必须向tiles类添加类，以匹配getElementsByClassName查询

施工室清单={ 房间：[{ id:1，姓名:living,，描述：客厅，背景路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrsU8tuZWySrSuRYdz72WWFiYaW5PCMIwPAPr_xAIqL-FgmQ4qRw，设置：{ 资料来源：[{ srcname:[DirectTV、AppleTV、Sonos]， iconpath:[src/assets/images/ThemeEditorImgLib_iTVLight5d3a46c1ad5d7796.png，路径2] }], 十六进制：000 } }, { id:2，名称：餐饮，描述：餐厅，背景路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjjspDkQEzbJJ1sSLS2ReWEx5P2ODNQmOtT572OIF9k3HbTGxV, 设置：{ 资料来源：[{ srcname:[气候、阴影]， iconpath:[路径1，路径2] }], 十六进制：000 } } ] } var col=document.getelementsbyclassnamew[0]； var outeritems=房间\列表房间； //控制台。注销项目；对于变量i=0；i您的主要问题从以下行开始：var inneritem=outeritems[i].Settings.Sources.srcname；Sources是一个数组，因此您需要像Sources[j]一样访问它，其中j是数组长度内的一个数字

内部循环很好，您只需要正确地循环源

我还必须向tiles类添加类，以匹配getElementsByClassName查询

var col = document.getElementsByClassName("roww")[0];

var outeritems = this.room_list.rooms;
// console.log(outeritems);
for (var i = 0; i < outeritems.length; i++) {
  var tile = document.getElementsByClassName("col-md-4")[0];
  var outerdiv = document.createElement("div");
  var h5 = document.createElement("h5");
  h5.innerHTML = outeritems[i].Description;
  outerdiv.appendChild(h5);
  var p = document.createElement("p");
  p.innerHTML = outeritems[i].name;
  outerdiv.appendChild(p);
  // col.appendChild(outerdiv);
  tile.appendChild(outerdiv);
  outeritems[i].Settings.Sources.forEach(source => {

    var inneritem = source.srcname;
    console.log(inneritem);
    var innerdiv = document.createElement("div");
    for (var j = 0; j < inneritem.length; j++) {
      console.log("hi")
      var h5inner = document.createElement("h5");
      h5inner.innerHTML = inneritem[j];
      console.log(h5inner);
      innerdiv.appendChild(h5inner);
    }
    tile.appendChild(innerdiv);
  });
}

}

您需要循环使用设置。源和srcname，因为它们都是数组

请尝试以下操作：

var col = document.getElementsByClassName("roww")[0];

var outeritems = this.room_list.rooms;
// console.log(outeritems);
for (var i = 0; i < outeritems.length; i++) {
  var tile = document.getElementsByClassName("col-md-4")[0];
  var outerdiv = document.createElement("div");
  var h5 = document.createElement("h5");
  h5.innerHTML = outeritems[i].Description;
  outerdiv.appendChild(h5);
  var p = document.createElement("p");
  p.innerHTML = outeritems[i].name;
  outerdiv.appendChild(p);
  // col.appendChild(outerdiv);
  tile.appendChild(outerdiv);
  outeritems[i].Settings.Sources.forEach(source => {

    var inneritem = source.srcname;
    console.log(inneritem);
    var innerdiv = document.createElement("div");
    for (var j = 0; j < inneritem.length; j++) {
      console.log("hi")
      var h5inner = document.createElement("h5");
      h5inner.innerHTML = inneritem[j];
      console.log(h5inner);
      innerdiv.appendChild(h5inner);
    }
    tile.appendChild(innerdiv);
  });
}

}

您需要循环使用Settings.Sources和srcname，因为它们都是数组

V_堆栈，正如前面所讨论的，这正是我对JSON的Sources部分所做的调整，向前推进它将使使用源代码更容易，特别是如果您添加其他属性。注意，现在它是一个自包含对象的数组

{ 房间：[{ id:1，姓名:living,，描述：客厅，背景路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrsU8tuZWySrSuRYdz72WWFiYaW5PCMIwPAPr_xAIqL-FgmQ4qRw，设置：{ 资料来源：[{ 名称：DirectTV， iconpath:src/assets/images/ThemeEditorImgLib_iTVLight5d3a46c1ad5d7796.png }, { srcname:AppleTV， iconpath:path2 }, { 名称：索诺斯， iconpath： } ], 十六进制：000 } }, { id:2，名称：餐饮，描述：餐厅，背景路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjjspDkQEzbJJ1sSLS2ReWEx5P2ODNQmOtT572OIF9k3HbTGxV, 设置：{ 资料来源：[{ 名称：气候， iconpath:path1 }, { 名称：阴影， iconpath:path2 } ], 十六进制：000 } } ]

} V_堆栈正如前面所讨论的，这只是我对JSON的sources部分所做的调整，向前看，它将使使用源代码更容易，特别是如果添加其他属性。注意，现在它是一个自包含对象的数组

}我尝试了一下，意识到JSON中的源代码可能结构不正确。JSON是由您构建的吗？你也在使用打字脚本吗？因为private initTileGrid:void也不正确。sources是一个带有子数组的数组，但它最好作为object数组使用。是的，JSON是我自己构建的，我在线使用JSON验证器检查我的JSON，所以我认为它是正确的。是的，我正在使用打字脚本，我正在处理Angular。你能告诉我如何更好地构造它吗？它是有效的JSON。但有效和最佳匹配是不同的。要我在下面发布一个建议的更改吗？是否可以为每个srcname映射一个iconfrom iconpath@Bibberty@Bibberty是的，这真的很有帮助，谢谢：我尝试了一下，意识到JSON中的源代码可能结构不正确。JSON是由您构建的吗？你也在使用打字脚本吗？因为private initTileGrid:void也不正确。sources是一个带有子数组的数组，但它最好作为object数组使用。是的，JSON是我自己构建的，我在线使用JSON验证器检查我的JSON，所以我认为它是正确的。是的，我正在使用打字脚本，我正在处理Angular。你能告诉我如何更好地构造它吗？它是有效的JSON。但有效和最佳匹配是不同的。要我在下面发布一个建议的更改吗？是否可以为每个srcname映射一个iconfrom iconpath@Bibberty@Bibberty是的，那真的很有帮助，谢谢：谢谢，我也会试试这个方法：谢谢，也将尝试此方法：此方法可行，但仍无法以网格格式显示。此方法可行，但仍无法以网格格式显示。