Parsing JSON with varying value types with Javascript

Question

I'm trying to parse a JSON object and construct a String using the data. An example object I'm using looks like this:

{
    "age": 35,
    "name": "",
    "time": {
        "24hr": true,
        "12hr": false
    }
}

I'd like the output to look like this:

age - 35
name
time - 24hr:true, 12hr:false

I'm running into a problem since the keys have different value types. "age" has an integer, "name" has an empty string, and "time" has an object.

What's the easiest way to construct that output?

Currently, I have a for loop that can print out the keys, but the values don't appear correctly.

Thanks

Show what you have currently, not seeing why value types are mattering. — tymeJV
– tymeJV, Commented Aug 26, 2013 at 17:34
@tymeJV the issue is probably with true and false. I agree that seeing the current code will help. — Christophe
– Christophe, Commented Aug 26, 2013 at 17:41

plalx · Accepted Answer · 2013-08-26 17:51:59Z

5

You shouldn't have any issues with most value types.

Here's a simple example that shows how you could do it without using recursion:

var o = {
    "age": 35,
    "name": "",
    "time": {
        "24hr": true,
        "12hr": false
    }
}, 
s = [],
x = [],
v, k, p;

for (k in o) {
   if (typeof (v = o[k]) === 'object') {
       s.push(k + ' - ');
       x.length = 0;
       for (p in v) {
           x.push(p + ':' + v[p]);
       }
       s.push(x.join(', ') + '\n');
   } else {
       s.push(k + ' - ' + v + '\n');
   }
}

console.log(s.join(''));

Obviously you could use a similar approach to dynamically construct some HTML structure instead of a string.

edited Aug 26, 2013 at 17:51

answered Aug 26, 2013 at 17:46

plalx

43.8k7 gold badges77 silver badges94 bronze badges

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

2 Comments

Jim Over a year ago

I wasn't using typeof to check for objects. Which is why I was running into problems. Adding this fixed the issue. Thanks!

plalx Over a year ago

@Jim, I'm glad I could help! Please note that you should probably generate some markup instead of a string if you plan to display the result in an HTML document.

abc123 · Accepted Answer · 2013-08-26 17:51:29Z

Demo jsFiddle

HTML

<div>
    <span>age - </span>
    <span id='age'></span>
</div>
<div>
    <span>name - </span>
    <span id='name'></span>
</div>
<div>
    <span>time - 24hr: </span>
    <span id='24hr'></span>
    <span>, 12hr: </span>
    <span id='12hr'></span>
</div>

JS

window.onload=function(){
    var json = '{"age": 35,"name": "","time": {"24hr": true,"12hr": false}}';
    var jObject = eval("("+json+")");
    document.getElementById("age").innerHTML = jObject.age;
    document.getElementById("name").innerHTML = jObject.name;
    document.getElementById("24hr").innerHTML = jObject.time["24hr"];
    document.getElementById("12hr").innerHTML = jObject.time["12hr"];
};

NOTE: I highly recommend using a JSON parser instead of eval.

Example Libraries:

JSON2
JSON.parse limited support

Example using JSON2

window.onload = function () {
    var json = '{"age": 35,"name": "","time": {"24hr": true,"12hr": false}}';
    var jObject = JSON.parse(json);
    document.getElementById("age").innerHTML = jObject.age;
    document.getElementById("name").innerHTML = jObject.name;
    document.getElementById("24hr").innerHTML = jObject.time["24hr"];
    document.getElementById("12hr").innerHTML = jObject.time["12hr"];
};

Collectives™ on Stack Overflow

Parsing JSON with varying value types with Javascript

2 Answers 2

2 Comments

Demo jsFiddle

Example using JSON2

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related