[英]Trying to access json content and display in a grid fashion
I have a JSON file having the following content. 我有一个具有以下内容的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"
}
}
]
}
My HTML file Has: 我的HTML文件具有:
<div class="roww">
<div class="col-md-4 col-sm-6 col-12">
</div>
</div>
I want to display my JSON content in the HTML. 我想在HTML中显示我的JSON内容。 So far I have tried the following.
到目前为止,我已经尝试了以下方法。
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);
}
I am able to display the description and name from the json but not able to fetch the list of sources. 我能够显示json中的描述和名称,但无法获取来源列表。
My final solution should be a grid with number of tiles equal to the number of objects in the JSON, with each tile having a background image from the json and its content. 我的最终解决方案应该是一个网格,其图块数等于JSON中的对象数,每个图块均具有json及其内容的背景图像。
Can anybody tell me where I am going wrong? 谁能告诉我我要去哪里错了? Any help appreciated!
任何帮助表示赞赏!
I would suggest and recommend generating your dynamic HTML the following way with Template Literals . 我建议并建议使用Template Literals通过以下方式生成动态HTML。
Using Array#map , Array#join and Destructuring assignment 使用Array#map , Array#join和解构分配
const data = {"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"}}]} const res = data.rooms.map(({name, Description, Settings:{Sources}})=>{ const inner = Sources.map(({srcname})=>{ return srcname.map(src=>`<h5>${src}</h5>`).join(""); }).join(""); return ` <div> <h5>${Description}</h5> <p>${name}</p> <div class="inner"> ${inner} </div> </div> ` }).join(""); 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{background-color:purple;color:white;padding:5px}p::before{content:"p:: "}div.inner{padding:5px;background-color:grey}div.inner::before{content:"inner div"}div.inner>h5{background-color:green;color:white}div.inner>h5::before{content:"inner h5:: "}
Unminified CSS: 未缩小的CSS:
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 { background-color: purple; color: white; padding: 5px; } p::before { content: "p:: "; } div.inner { padding: 5px; background-color: grey; } div.inner::before { content: "inner div"; } div.inner > h5 { background-color: green; color: white; } div.inner > h5::before { content: "inner h5:: " }
Your main problem starts at this line var inneritem=outeritems[i].Settings.Sources.srcname;
您的主要问题从这一行开始
var inneritem=outeritems[i].Settings.Sources.srcname;
Sources
is an array so you need to access it like Sources[j]
where j is a number within the arrays length. Sources
是一个数组,因此您需要像Sources[j]
一样访问它,其中j是数组长度内的数字。
The inner loop is fine, you just need to loop through Sources
properly 内部循环很好,您只需要正确循环遍历
Sources
I also had to add classes to the tiles class to match your getElementsByClassName
query 我还必须向tile类添加类以匹配您的
getElementsByClassName
查询
const room_list = { "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" } } ] } var col = document.getElementsByClassName("roww")[0]; var outeritems = 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 inneritems = outeritems[i].Settings.Sources var innerdiv = document.createElement("div"); for (var j = 0; j < inneritems.length; j++) { var inneritem = inneritems[j]; var h5inner = document.createElement("h5"); h5inner.innerHTML = inneritem.srcname; innerdiv.appendChild(h5inner); } tile.appendChild(innerdiv); }
<div class="roww"> <div class="col-md-4 col-sm-6 col-12 tile no-padding"> </div> </div>
Try this: 尝试这个:
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);
});
}
} }
You need to loop through the Settings.Sources
and srcname because all of them are arrays 您需要遍历
Settings.Sources
和srcname,因为它们都是数组
V_Stack as discussed, this is just the tweak I would do to the sources section of the JSON, moving forward it will make working with a source easier, especially if you add additional properties. 如前所述,V_Stack只是我对JSON的源代码部分所做的调整,向前发展将使使用源代码更加容易,尤其是在添加其他属性的情况下。 Note it is an array of self contained objects now.
请注意,它现在是一个自包含对象的数组。
{ "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", "iconpath": "src/assets/images/ThemeEditorImgLib_iTVLight5d3a46c1ad5d7796.png" }, { "srcname": "AppleTV", "iconpath": "path2" }, { "srcname": "Sonos", "iconpath": "" } ], "hex": "#000" } }, { "id": "2", "name": "dining", "Description": "The Dining room", "backgroundpath": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjjspDkQEzbJJ1sSLS2ReWEx5P2ODNQmOtT572OIF9k3HbTGxV", "Settings": { "Sources": [{ "srcname": "Climate", "iconpath": "path1" }, { "srcname": "Shades", "iconpath": "path2" } ], "hex": "#000" } } ] }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.