时间戳

首页 > 解决方案 > Vanilla JS 如何将 json 解析为 html

javascript - Vanilla JS 如何将 json 解析为 html

问题描述

我有一个包含产品信息的 url json 文件：img、url、标题等...

我想在我的轮播上显示已经完全到位的数据。最好的方法是什么？我真的在为 itemsData 苦苦挣扎。

我错过了什么？

可能我想在正确的标签上显示数据？非常感谢任何帮助在下面有一个小提琴演示，我希望有人可以引导我完成解决方案。

HTML

<div class="wrap">
      <ul id="carousel">
      </ul>
</div>

JSON

    "itemsData": [{
    {
    "productUrl": "hdhdhdhdh.html",
    "imageSrc": "image.jpg",
    "productTitle": "sksksksksk",
    "price": "8383838"
    }
]

JS

 const request = new XMLHttpRequest();
request.open('GET', 'myJson.json');
request.responseText = 'json';
 
request.onload = function () {
  // Convert JSON data to an object 
  let data = JSON.parse(this.responseText); 

  let output = '';
  for (var i = 0; i < data.length; i++) {
    output += '<li class="carousel-seat"><h4>' + data[i].productTitle + '</h4> <p>Price ' + data[i].price + ' </p></li>'
  }
  document.getElementById('carousel').innerHTML = output;
}
request.send();

https://jsfiddle.net/davidesitua/m1y469db/

标签： javascriptjson

解决方案

data没有长度（它不是数组）
但是data.itemsData是一个数组（因此它有一个长度）

我在下面有一个示例，但是对于您的实际 javascript，它将类似于

const request = new XMLHttpRequest();
request.open('GET', 'myJson.json');
request.responseText = 'json';
 
request.onload = function () {
  // Convert JSON data to an object 
  let data = JSON.parse(this.responseText);
  let dataa=data.itemsData
  let output = '';
  for (var i = 0; i < dataa.length; i++) {
    output += '<li class="carousel-seat"><h4>' + dataa[i].productTitle + '</h4> <p>Price ' + dataa[i].price + ' </p></li>'
  }
  document.getElementById('carousel').innerHTML = output;
}
request.send();


let data =  
{
  "itemsData": 
  [
    {
    "productUrl": "hdhdhdhdh.html",
    "imageSrc": "image.jpg",
    "productTitle": "sksksksksk",
    "price": "8383838"
    }
  ]
}

var dataa=data.itemsData
var output=''
for (var i = 0; i < dataa.length; i++) {
  output += '<li class="carousel-seat"><h4>' + dataa[i].productTitle + '</h4> <p>Price ' + dataa[i].price + ' </p></li>'
}
document.getElementById('carousel').innerHTML=output
<div id="carousel"></div>

推荐阅读