Unexpected empty key-value in JSON string

Question

I'm trying to parse a json string embedded in my html file. Here is the reduced code.

<html>
<head>
<script src="./jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
  function parse_json(){
    var jtext = $("#mtxt").text();
    var jdata = jQuery.parseJSON(jtext);
    JSON.parse(JSON.stringify(jdata), function (key, value){ 
            alert("key=" + key + " value=" + value);
            if(key== ""){
                    alert("value in string" + JSON.stringify(value));              
            }
    });
  }
  $(document).ready(function() {
    $("#run").click( function () {
        parse_json();
    }); 
  });
</script>
</head>

<body>
<a id="run" href="#">run</a>
<div id="mtxt">
{"caller": "539293493"}
</div>
</body>
</html>

When I parse it, apart from the expected "caller" value, I get an extra empty "key" and "value". The first alert gives me

key= value=[object Object]

The second alert gives me

value in string{}

What is happening? Why this extra entry?

JAAulde · Accepted Answer · 2011-04-04 11:04:34Z

3

Ok, you're passing the second param to JSON.parse() which is the reviver callback. Per the JSON docs, This callback is executed "...for every key and value at every level of the final result. Each value will be replaced by the result of the reviver function. This can be used to reform generic objects into instances of pseudoclasses, or to transform date strings into Date objects."

Since your reviver callback doesn't return anything, your object is getting improperly manipulated and distorted. I don't believe you have any use for the reviver in your use here. I have never seen it in use anywhere, and I use JSON.parse a LOT.

Your code should look like this:

function parse_json()
{
    var jtext = $("#mtxt").text(),
        jdata = JSON.parse( $.trim( jtext ) ),
        key,
        value;

    for( key in jdata )
    {
        if( Object.prototype.hasOwnProperty.call( jdata, key ) )
        {
            value = jdata[key];
            //prefer console.log here...
            alert( 'key: ' + key + ', value: ' + value)
        }
    }
}

$( function()
{
    $( '#run' ).click( function()
    {
        parse_json();
    } ); 
} );

Demo: http://jsfiddle.net/hjVqf/

edited Apr 4, 2011 at 11:04

answered Apr 3, 2011 at 23:51

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

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

3 Comments

Neo Over a year ago

I want to iterate over a list of json dicts and I don't know their key values. So I'm forced to use the reviver function. Is there a way around?

Neo Over a year ago

You missed value= jdata[key] in your answer. Otherwise it works perfectly.

JAAulde Over a year ago

Ahh, yes, I had an edit go awry and missed that when fixing it (notice it was in the fiddle). I've corrected it now, thanks. Glad it works!

Richard Marskell - Drackir · Accepted Answer · 2011-04-03 23:52:24Z

2

Ok, I've been fooling around with this on jsfiddle. One of the things I noticed that you weren't doing, was returning a value for the reviver function. According to the Microsoft JSON.parse docs, the point of the function is to return a modified (if necessary) version of the value property which will update the DOM object. Now, it also says that:

A function that filters and transforms the results. The deserialized object is traversed recursively, and the reviver function is called for each member of the object in post-order (every object is revived after all its members have been revived).

Ok, so I think the key here is that the reason the function is run twice, is because it's running for the first member (simply "caller": "539293493") and then for the object itself ({"caller": "539293493"}).

You'll notice that in my linked example, with the added return value; statement, the object with the blank key is the whole object.

answered Apr 3, 2011 at 23:52

Richard Marskell - Drackir

13.4k3 gold badges37 silver badges55 bronze badges

3 Comments

Neo Over a year ago

So basically reviver function gets called on Object as well, which is its return value. Why would anybody want that behavior? And whats the workaround ?

JAAulde Over a year ago

@Neo, the purpose of the behavior is, as I stated in my response, "used to reform generic objects into instances of pseudoclasses, or to transform date strings into Date objects." You do not need this, and the work around is to not use it. Please thoroughly read the responses here (both are spot on--Drackir's got +1 from me) and look at the code and demo I gave you.

Richard Marskell - Drackir Over a year ago

@Neo: The return value of the function is the value. In the first run of the function, value="539293493". The second time it's run, value={"caller": "539293493"}. If you take a look at the MS docs page I linked to, you'll note that the purpose of the function is to transform the objects within the JSON object, should that be necessary. The function is not for iteration of the object's properties. As for a workaround, @JAAulde has updated his answer with one.

Collectives™ on Stack Overflow

Unexpected empty key-value in JSON string

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related