Parse JSON foreach with JS, shows HTML list

Question

I am currently trying to parse a JSON with JavaScript. My issue is that I'd like the output to look like this:

<li>AppName1</li>
<li>AppName2</li>
<!-- and so on... -->

However it just does not work and I don't know how to achieve that. This is the object deserialized from the JSON response:

{
  "data": [{
    "AppId": 1,
    "AppName": "AppName1",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "AppName2",
    "AppSize": ""
  }]
}

This is my .js file:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("test").innerHTML = myObj.AppName;
  }
};
xmlhttp.open("GET", "json.json", true);
xmlhttp.send();

This is in my HTML file

<p id="test"></p>

Any help would be appreciated as I really cannot seem to understand this a single bit. Thank you so much!

Please put a copy of the JSON in your question rather than a link that may not exist later. Do you want both a pure JavaScript answer and a jQuery one? — Mark Schultheiss
– Mark Schultheiss, Commented Feb 15, 2019 at 12:34
@MarkSchultheiss Did so! JavaScript is preferred but a jQuery answer could be both helpful and interesting — Leon Mlaiel
– Leon Mlaiel, Commented Feb 15, 2019 at 12:43

Rory McCrossan · Accepted Answer · 2019-02-15 12:31:11Z

2

Firstly note that you can only have li elements as children of <ul> or <ol>, so the p element needs to be changed.

The AppName property is part of the objects within data, so you will need to either loop through them:

myObj.data.forEach(function(o) {
   document.getElementById("test").innerHTML += '<li>' + o.AppName + '</li>';
}

Or access them, individually by index:

document.getElementById("test").innerHTML = '<li>' + myObj.data[0].AppName + '</li>'; // first item only

var myObj = {
  "data": [{
    "AppId": 3,
    "AppName": "AnimojiStudio",
    "AppSlug": "animojistudio",
    "AppIcon": "https:\/\/img.lmdinteractive.pro\/icons\/animojistudio.png",
    "AppUrl": "https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/animojistudio.ipa",
    "AppVersion": "1.2.2",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "Cute Cut Pro",
    "AppSlug": "cute-cut-pro",
    "AppIcon": "http:\/\/is2.mzstatic.com\/image\/thumb\/Purple118\/v4\/03\/70\/69\/03706968-2399-a1d8-e7c4-12897394ead9\/source\/512x512bb.jpg",
    "AppUrl": "https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/cutecutpro.ipa",
    "AppVersion": "",
    "AppSize": ""
  }]
}

document.getElementById("test").innerHTML = '<li>' + myObj.data[0].AppName + '</li>';

<ul id="test"><li>

answered Feb 15, 2019 at 12:31

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leon Mlaiel Over a year ago

Could you explain the loop a little further? I don't really understand how the loop works with the objects! Thank you so much for your answer though, it helped me out a ton so far!

Rory McCrossan Over a year ago

It's a forEach() loop. It iterates over every element in the array, executing the function you provide on each one. Within that function the argument provided is the current element in the iteration. In the case of the above example, it's the o variable.

JoshG · Accepted Answer · 2019-02-15 12:37:01Z

If you just want a list of the AppName properties, you could do something like the below with jQuery. See the comments in the code for details:

// Below is the JSON string from the OP's link
let json = '{"data":[{"AppId":3,"AppName":"AnimojiStudio","AppSlug":"animojistudio","AppIcon":"https:\/\/img.lmdinteractive.pro\/icons\/animojistudio.png","AppUrl":"https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/animojistudio.ipa","AppVersion":"1.2.2","AppSize":"2.1"},{"AppId":2,"AppName":"Cute Cut Pro","AppSlug":"cute-cut-pro","AppIcon":"http:\/\/is2.mzstatic.com\/image\/thumb\/Purple118\/v4\/03\/70\/69\/03706968-2399-a1d8-e7c4-12897394ead9\/source\/512x512bb.jpg","AppUrl":"https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/cutecutpro.ipa","AppVersion":"","AppSize":""}]}';

// Parse the JSON string into a JS object
json = JSON.parse(json);
let html = "";

// Loop over the object and append a list item for each AppName property.
$.each(json.data, function (index, item) {
    html += "<li>" + item.AppName + "</li>";
});

// Append the list to the div.
$("#container").append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<div id="container"></div>

ellipsis · Accepted Answer · 2019-02-15 12:41:47Z

1

Using forEach loop and append. Inserting li inside a p tag is not a good idea even though it works. Convert the p into a ul/ol

var data = {
  "data": [{
    "AppId": 3,
    "AppName": "AnimojiStudio",
    "AppSlug": "animojistudio",
    "AppIcon": "https:\/\/img.lmdinteractive.pro\/icons\/animojistudio.png",
    "AppUrl": "https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/animojistudio.ipa",
    "AppVersion": "1.2.2",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "Cute Cut Pro",
    "AppSlug": "cute-cut-pro",
    "AppIcon": "http:\/\/is2.mzstatic.com\/image\/thumb\/Purple118\/v4\/03\/70\/69\/03706968-2399-a1d8-e7c4-12897394ead9\/source\/512x512bb.jpg",
    "AppUrl": "https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/cutecutpro.ipa",
    "AppVersion": "",
    "AppSize": ""
  }]
}
data.data.forEach(e =>$('#test').append('<li>' + e.AppName + '</li>' + "<br>"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="test"></ul>

edited Feb 15, 2019 at 12:41

answered Feb 15, 2019 at 12:33

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

1 Comment

Rory McCrossan Over a year ago

There are very few times where document.write is a good idea. In fact more often than not it's very bad practice - as in this case. Do not use it here. Not least of all because you're just dumping the li elements in the middle of the DOM, not in any specific container.

mohiris · Accepted Answer · 2019-02-15 12:54:07Z

0

You can use map() since you have an array inside myObj. What you want to do is returning a li with AppName value

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    var ul = document.getElementById("myUl");
    var li = document.createElement('li');
    var data = myObj.data;
    data.map(app => {
        li.textContent = app.AppName;
        ul.appendChild(li);
    })
  }
};
xmlhttp.open("GET", "json.json", true);
xmlhttp.send();

answered Feb 15, 2019 at 12:54

mohiris

501 silver badge6 bronze badges

1 Comment

Leon Mlaiel Over a year ago

Hmm, doesn't seem to work for me. Throws back this error: null is not an object (evaluating 'ul.appendChild')

Mark Schultheiss · Accepted Answer · 2019-02-15 17:51:17Z

You have your object, and it is parsed so let's concentrate on doing something with that object:

var myObj = {
  "data": [{
    "AppId": 1,
    "AppName": "AppName1",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "AppName2",
    "AppSize": ""
  }]
};

Now we have that, let's use it in different ways. myObj contains an array called data here. That array is an array of JavaScript objects, each with properties like "AppId", "AppName" etc. which we can access either directly or through an index. So, let's put up some examples of how to do that. Comments in the code

var myObj = {
  "data": [{
    "AppId": 1,
    "AppName": "AppName1",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "AppName2",
    "AppSize": ""
  }]
};
// Here I create a Bootstrap tab and contents
// call to create a new element on the DOM
function additem(item) {
  let lt = $('#list-tab');
  let ltc = $('#debug-tabContent');
  let thing = item.name;
  let thingId = "list-" + thing;
  let thingTabId = thingId + "-list";
  let ttab = $('<a />')
    .addClass('list-group-item list-group-item-action')
    .data('toggle', "list")
    .prop("id", thingTabId)
    .attr('role', 'tab')
    .prop('href', '#' + thingId)
    .html(item.name);
  ttab.appendTo(lt);
  let lc = $('<div />')
    .addClass('tab-pane fade')
    .prop("id", thingId)
    .attr('role', 'tabpanel')
    .text(JSON.stringify(item.obj));
  // .text("test");
  lc.appendTo(ltc);
}
// * cheat, put the objects in a bootstrap tab content list
additem({
  name: "myObj",
  obj: myObj
});
additem({
  name: "myObjW",
  obj: window["myObj"]
});
additem({
  name: "data",
  obj: myObj.data
});
additem({
  name: "data0",
  obj: myObj.data[0]
});
additem({
  name: "AppName",
  obj: myObj.data[0].AppName
});

// pure JS walk
// Here I create a LI list as a Bootstrap list group
let len = myObj.data.length;
let myP = document.getElementById("test");
let myReg = document.getElementById("mylist-reg");
let newUl = document.createElement("ul");
newUl.classList.add('list-group');
newUl.classList.add('list-group-primary');
for (var i = 0; i < len; i++) {
  let newLi = document.createElement("li");
  let newContent = document.createTextNode(myObj.data[i].AppName);
  newLi.appendChild(newContent);
  newLi.setAttribute("id", "app-" + myObj.data[i].AppId); //has to be unique
  newLi.setAttribute("class", "list-group-item");
  newUl.appendChild(newLi);
}
// put the list after the paragraph
document.body.insertBefore(newUl, myP);

let myLast = document.getElementById("app-2");
myLast.classList.add("active");
//activate the bootstrap tab clicks
$('#list-tab').on('click', 'a', function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// just do it as strings
let html = "";
for (var i = 0; i < len; i++) {
  let textel = "<li id='app-js-" + myObj.data[i].AppId + "'>" + myObj.data[i].AppName + "</li>";
  html = html + textel;
}
myReg.innerHTML = html;

// jQuery, similar to prior
$.each(myObj.data, function(index, el) {
  let textel = "<li id='app-jq-" + el.AppId + "'>" + index + ":" + el.AppName + "</li>";
  $('#mylist-jq').append(textel);
});

// jQuery, similar to prior
$.each(myObj.data, function(index, el) {
  let elid = 'app-jq2-' + el.AppId;
  $("<li />").prop("id", elid).text(el.AppName)
    .appendTo('#mylist-jq2');
});

.list-group-item {
  border: 1px lime solid
}

.list-item-last {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<ul id="mylist-reg"></ul>
<ul id="mylist-jq"></ul>
<ul id="mylist-jq2"></ul>
<p id="test" class="row">put stuff after here</p>
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="debug-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Click a tab to see one.</div>

    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

Collectives™ on Stack Overflow

Parse JSON foreach with JS, shows HTML list

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related