Convert imple JSON Object into formatted HTML (javascript or jQuery)

Question

I have a bunch of objects like this:

"value": {
  "something": true,
  "another": false,
  "testing": true,
  "bob": "Hello",
  "restrooms": true,
  "price_rating": 1,
}

What I simply want to do is render the items inside value as HTML. Sort of like:

"something": true
"another": false
"testing": true
"bob": "Hello"
"restrooms": true
"price_rating": 1

Is there a simple way to do this without writing some complicated each and appending each item one at a time? Of note, these objects will have different attributes and number of attributes.

`value` is just a nested part of the full JSON in this case. — jonmrich, Aug 03 '17 at 17:13

score 3 · Accepted Answer · 2017-08-03T17:16:11.713

Convert the object to pretty string using JSON.stringify(obj, null, 2) and output the content to a <pre> tag

var a = {
  "value": {
    "something": true,
    "another": false,
    "testing": true,
    "bob": "Hello",
    "restrooms": true,
    "price_rating": 1,
  } 
};
document.getElementById("output").innerHTML = JSON.stringify(a.value, null, 2);

<pre id="output"></pre>

score 1 · Answer 2 · answered Aug 03 '17 at 17:15

1

You can convert any object to json string format

JSON.stringify(x.value)

answered Aug 03 '17 at 17:15

Ali

1,982
1
15
16

charlietfl · Answer 3 · 2017-08-03T17:28:59.653

If you need it as html without json braces and quotes can do something like:

let data = {
    "value": {
      "something": true,
      "another": false,
      "testing": true,
      "bob": "Hello",
      "restrooms": true,
      "price_rating": 1,
    }
  },
  
  displayObj = data.value,
  
  html = Object.keys(displayObj)
  .map(key => key + ': ' + displayObj[key].toString()).join('<br>')

document.body.innerHTML = html

score 0 · Answer 4 · answered Aug 03 '17 at 17:25

You can convert the object into a string and use replace function.

var jsonobj = {"value": {
  "something": true,
  "another": false,
  "testing": true,
  "bob": "Hello",
  "restrooms": true,
  "price_rating": 1,
}};

var str = JSON.stringify(jsonobj.value);

str = str.replace(/,/g, '<br/>').replace('{', '').replace('}', '');

document.getElementById("output").innerHTML = str;

<div id="output"></div>

Convert imple JSON Object into formatted HTML (javascript or jQuery)

4 Answers4