How to display json data in a div when json data is in array [closed]

Question

I am trying to display data received as Ajax callback in my app's page. The data somewhat looks like this:

"data": [
    {
     "name": "Rehan",
     "location": "Pune",
     "description": "hello hi",
     "created_by": 13692,
     "users_name": "xyz",
    },
    {
      "name": "Sameer",
      "location": "Bangalore",
      "description": "how are you",
      "created_by": 13543,
      "users_name": "abc",
    },

The API contain more than 100 data, so how can we display these data in a html page. like this:

Name: Rehan
location: Pune
Description: hello hi
created by: 13692
user name: xyz

Edit

Alternatively, as suggested in comments / solutions, how to display the data as an HTML table?

Answer 1

You can use for to loop thru the array and contruct an HTML string. Use jQuery's .append() to add the string to the body.

var data = [{
    "name": "Rehan",
    "location": "Pune",
    "description": "hello hi",
    "created_by": 13692,
    "users_name": "xyz",
  },
  {
    "name": "Sameer",
    "location": "Bangalore",
    "description": "how are you",
    "created_by": 13543,
    "users_name": "abc",
  },
]

var htmlText = '';
for (var key in data) {
  htmlText += '<div class="div-conatiner">';
  htmlText += '<p class="p-name"> Name: ' + data[key].name + '</p>';
  htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
  htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
  htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
  htmlText += '<p class="p-uname"> Username: ' + data[key].users_name + '</p>';
  htmlText += '</div>';
}

$('body').append(htmlText);

.div-conatiner {
  background-color: #eeeeee;
  margin-bottom: 5px;
  padding: 5px;
}

.div-conatiner p {
  margin : 0px;
}

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

UPDATE: Another option is using map to loop thru the array and use Template literals to construct the HTML

var data = [{
    "name": "Rehan",
    "location": "Pune",
    "description": "hello hi",
    "created_by": 13692,
    "users_name": "xyz",
  },
  {
    "name": "Sameer",
    "location": "Bangalore",
    "description": "how are you",
    "created_by": 13543,
    "users_name": "abc",
  },
]

var htmlText = data.map(function(o){
  return `
      <div class="div-conatiner">
      <p class="p-name"> Name: ${o.name}</p>
      <p class="p-loc"> Location: ${o.location}</p>
      <p class="p-desc"> Description: ${o.description}</p>
      <p class="p-created"> Created by: ${o.created_by}</p>
     <p class="p-uname"> Username: ${o.users_name}</p>
     </div>
  `;
});

$('body').append(htmlText);

.div-conatiner {
  background-color: #eeeeee;
  margin-bottom: 5px;
  padding: 5px;
}

.div-conatiner p {
  margin: 0px;
}

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

Answer 2

Try this:

<div id="json"></div>
<script>
        var obj = {"data": [
{
 "name": "Rehan",
 "location": "Pune",
 "description": "hello hi",
 "created_by": 13692,
 "users_name": "xyz",
},
{
  "name": "Sameer",
  "location": "Bangalore",
  "description": "how are you",
  "created_by": 13543,
  "users_name": "abc",
}
]}
var divId = document.getElementById("json")
for(var i=0;i<obj.data.length;i++)
for(var keys in obj.data[i]){
 console.log(keys +"-->"+obj.data[i][keys]);
 divId.innerHTML = divId.innerHTML + "<br/>"+ keys +"-->"+obj.data[i][keys];
}
</script>

Fiddle : http://jsfiddle.net/Sourabh_/1m2tjth3/

You can modify this as per your requirement.