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

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 += '
';
  htmlText += '
 Name: ' + data[key].name + '
';
  htmlText += '
 Location: ' + data[key].location + '
';
  htmlText += '
 Description: ' + data[key].description + '
';
  htmlText += '
 Created by: ' + data[key].created_by + '
';
  htmlText += '
 Username: ' + data[key].users_name + '
';
  htmlText += '
';
}

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

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

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

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 `
      

      
 Name: ${o.name}
      
 Location: ${o.location}
      
 Description: ${o.description}
      
 Created by: ${o.created_by}
     
 Username: ${o.users_name}
     
  `;
});

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

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

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