Vanilla JS How Parse json into html

Question

I Have a url json file containing a product information: img, url, title, etc...

I'd like to display the datas on my carousel that is already fully in place. What's the best way? I'm really struggling with the itemsData.

What am I missing?

possibly id like to display the datas on the right tags? Any help much appreciated Have a fiddle demo below, I hope someone can drive me through the solution.

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/

Answer 1

data doesn't have a length(it is not the array)
However data.itemsData is an array(therefore it has a length)

I have an example further down, however for your actual javascript, it would be something like

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>

Answer 2

Firstly, your JSON is wrong.

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

This is wrong JSON

Correct JSON will be like this.

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

Your "itemsData" is an array, so you need to have data.itemsData[i] to access the inner object of the JSON.

Thus data.itemsData.length will give you the items you have in an array.

Check below code:

const request = new XMLHttpRequest();
request.open('GET', 'https://api.jsonbin.io/b/6023c6b7435c323ba1c44646/1');
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.itemsData.length; i++) {
    output += '<li class="carousel-seat"><h4>Title: ' + data.itemsData[i].productTitle + '</h4> <p>Price ' + data.itemsData[i].price + ' </p></li>'
  }
  document.getElementById('carousel').innerHTML = output;



}
request.send();

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

Answer 3

I believe you are missing the "onreadystatechange" method:

    function readJson(jsonFile, callback) {
    var request = new XMLHttpRequest();
    request.open("GET", jsonFile, true);
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status == "200") {
            callback(request.responseText);
        }
    }
    request.send(null);
}

Then use the function as you want like this:

readJson("json.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

On the other hand, your Json file is wrong written:

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