JSON string to object problem

JavaScript
1

Hi

I have a valid JSON string

This is taken from the output from console.log() below.



{"actlist":[
          {"action":"test1 ","count":1},
          {"action":"test2","count":2},
          {"action":"test3","count":1},
          {"action":"test4","count":2},
          {"action":"test5","count":1}
          ]}

tested here

I am passing this into JS and trying to create an object from it

            
            var json2 = JSON.parse(data2);       //<< data2 coming from a hidden form field.
 
            console.log(json2);                  //<< json2 outputs as a string

Any ideas why I cant create an object from this?

2

Hi David,

It should work. I’ve set up a working example in jsfiddle, so you can compare it with what you’re doing and see if there are any differences.

3

I’m trying it on my local machine. I’m getting an error: “SyntaxError: JSON.parse: unexpected character”.

4

I am producing this format from PHP…

{
    "1": {
        "action": "test1",
        "count": 1
    },
    "2": {
        "action": "test2",
        "count": 2
    },
    "3": {
        "action": "test3",
        "count": 1
    },
    "4": {
        "action": "test4",
        "count": 2
    },
    "5": {
        "action": "test5",
        "count": 1
    }
}

Storing it in a hidden field after encoding it from a PHP method.

return json_encode($JSON);

Grabbing it in JS.

var data2 = $('#jsonVals2').val();

Converting it to an object using.

var json2 = JSON.parse(data2);

Testing it using…

alert(typeof json2);

This is still outputting as a string!!

5

Here’s an odd thing. If I JSON.stringify() it, first, then JSON.parse() it, no problem. (Object {actlist=[5]})

6

David, are you able to share the link to the page with the problem? Seeing the code in context might make things easier.

7

Sorry fretburner Its a restricted app

Here is the actual code extracted from app…

hidden field value after php json_encode() has been at it.

<input type="hidden" id="jsonVals2" value='"{\\"1\\":{\\"action\\":\\"test1 \\",\\"count\\":1},\\"2\\":{\\"action\\":\\"test2\\",\\"count\\":2},\\"3\\":{\\"action\\":\\"test3\\",\\"count\\":1},\\"4\\":{\\"action\\":\\"test4\\",\\"count\\":2},\\"5\\":{\\"action\\":\\"test5\\",\\"count\\":1}}"' />

JS code.

 if($('#jsonVals2').length){
        
       var data2 = $('#jsonVals2').val();                  //<< get string from above
        
        if(data2.length){                                  //<< check it has something in it

            var json2 = JSON.parse(data2);                //<< convert to object
            
            alert(typeof json2);                          //<< test for type (currently === STRING)

            console.log(json2);                         //<< output to console. (see below)
             
           // more code here (not relevant).
        }
    }

Here is the JSON above output to the console from within JS. Notice the escaped quotes have been removed after JS has been at it. This validates as a well formed JSON string here

{"1":{"action":"test1 ","count":1},"2":{"action":"test2","count":2},"3":{"action":"test3","count":1},"4":{"action":"test4","count":2},"5":{"action":"test5","count":1}}

I am about to do the Karate Kid Crane on it!!!

8

Your string is quoted twice. If you open up your browser’s console and run JSON.parse(json2) a second time, you’ll get an object as the output.

An easier way to go about this is just to have PHP output the JSON directly into a JS variable:


<script>
    var myObj = <?php echo json_encode($data) ?>;
</script>
9

Ah cheers

Been on this for hours!