4

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?

3
  • 2
    You would need to use a loop and append the required HTML elements to the DOM. Apr 23, 2015 at 9:24
  • how to append the HTML elements to the DOM. Actually I am newbie to display data of json Apr 23, 2015 at 9:37
  • Study some tutorials ... lots of them online. Please read through help section regarding how to use this site
    – charlietfl
    Apr 23, 2015 at 9:59

3 Answers 3

14

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>

8
  • Thanks for your wonderful output @Eddie who. But what to do when i want to assign id attribute on each element ..? Apr 23, 2015 at 9:41
  • sorry i forget to mention the image url on json api data. what to do when there is also an image to display. "image": "rajpurohit.s3-us-west-2.amazonaws.com/images/…", Apr 23, 2015 at 9:43
  • @MohammadIqbal, you mean if you want to add 'id' attribute for example?
    – Eddie
    Apr 23, 2015 at 9:44
  • yes you are right. i have to use id attribute for css and also to get value of div to pass as a parameter Apr 23, 2015 at 9:46
  • @MohammadIqbal Please check updated code.. I added class attribute for css
    – Eddie
    Apr 23, 2015 at 9:49
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.

1

Assuming you have a table with id #table, loop through the json object and append a row for every object item:

var jsonObj = { ... }

for (i in jsonObj) {
   for (n in jsonObj[i]) {
      $('#table > tbody').append('<tr><th>' + n + '</th><td>' + jsonObj[i][n] +  '</td></tr>');
   }
}

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",
    }];


for (i=0;i<=data.length;i++) {
   for (n in data[i]) {
      $('#table > tbody').append('<tr><th>' + n + '</th><td>' + data[i][n] +  '</td></tr>');
   }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table">
  <tbody>
  </tbody>
</table>

6
  • Thanks for your reply but i want to display that data in div not in table. Apr 23, 2015 at 9:30
  • I have to display that data in following format: <div> <strongl>Name</strong> <strong>Location</strong> <strong>Description</strong> <strong>created by</strong> <small >username</small> </div> Apr 23, 2015 at 9:32
  • So, instead of rows, just append divs or spans
    – kapantzak
    Apr 23, 2015 at 9:36
  • please tell me what to do when i have an image data also Apr 23, 2015 at 10:17
  • My data is a list (converted from queryset) I am getting as Ajax callback. It has two fields : Distance and Rate. Using your solution almost gets me what I want, except the second field value is coming as a new <tr> item (ie the data instead of coming in one row are appearing in two separate rows - one after the other). My data looks something like this (truncated) : [(2, Decimal('1'), Decimal('20.85')), (3, Decimal('101'), Decimal('21.55')), (4, Decimal('106'), Decimal('22.23')), ... , ]. How do I design the loop in order to get the two field values in the same row? Jun 17, 2020 at 10:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.