Unable to parse a string into JSON object, unable to display an alert box from javascript

Question

EDIT: SOLVED. Use any of the solutions below, but document.onload needs to be changed to window.onload. Also works without needing window.onload function anyway.

Here is the test.php file that i'm working with

<?php 
  include("conn.php");
?>

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
</head>
<body>

    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        document.onload = function (){
          var jsonString = '<?php echo json_encode($rowarr); ?>';
          var jsonObj = jQuery.parseJSON( jsonString );
          console.log(jsonObj);
          alert( jsonObj.Auckland );
    };

  </script>
</body>
</html>

I have verified in Chrome Developer tools the value of jsonString to be

'{"Auckland":37616,"Wellington":35357,"Christchurch":29818}'

After that I don't get any log on the console or any alert box. I have also tried JSON.parse method instead of jQuery.parseJSON to no avail.

I'm trying to get this JSON into a datatable format used for google charts geo chart which looks like this bit of code

var data = google.visualization.arrayToDataTable([
    ['City',   'Population', 'Area'],
    ['Rome',      2761477,    1285.31],
    ['Milan',     1324110,    181.76],
    ['Naples',    959574,     117.27],
    ['Turin',     907563,     130.17],
    ['Palermo',   655875,     158.9],
    ['Genoa',     607906,     243.60],
    ['Bologna',   380181,     140.7],
    ['Florence',  371282,     102.41],
    ['Fiumicino', 67370,      213.44],
    ['Anzio',     52192,      43.43],
    ['Ciampino',  38262,      11]
  ]);

Are you sure you don't get an error in the log? - Could you include the logging code for jsonString? — Bergi, Jul 25 '12 at 23:08
Those grave accents are not really in your string, are they? — Bergi, Jul 25 '12 at 23:10
@Bergi - do you mean the single quotes ? they are in the string. And yes there is nothing in the console log even with console.log(jsonString); — devcoder, Jul 25 '12 at 23:15
Those accents (`) before and after the braces. Not the apostrohes (') or the (double) quotes ("). — Bergi, Jul 25 '12 at 23:17
@Bergi - Oh those. Fixed them, they are supposed to be single quotes. But I replied to your answer below, please take a look and thank you for your help. — devcoder, Jul 25 '12 at 23:26

Musa · Accepted Answer · 2012-07-25T23:27:52.160

4

If you don't put it as a string it would be an object and you would not have to parse it

var jsonObj = <?php echo json_encode($rowarr); ?>;

instead of

var jsonString = '<?php echo json_encode($rowarr); ?>';
var jsonObj = jQuery.parseJSON( jsonString );

It looks like document.onload doesn't fire/already fired? you should use window.onload or $(document).ready() instead.

edited Jul 25 '12 at 23:27

answered Jul 25 '12 at 23:09

Musa

96,336
17
118
137

I tried this, but still no dice. No alert box or anything in the console. – devcoder Jul 25 '12 at 23:19
@devcoder are you sure `document.onload` is suitable for the situation because I couldn't get tit to fire but `window.onload` works http://jsfiddle.net/mowglisanu/6L2Zb/ – Musa Jul 25 '12 at 23:30
Musa - OMG! thank you!! Been banging my head against this all day. – devcoder Jul 25 '12 at 23:33

Torsten Walter · Answer 2 · 2012-07-25T23:27:52.453

2

Since you are actually inserting the JSON with a php echo right inside the script tag in the actual html page, it technically becomes an object literal. There is no need to go through the extra parsing step in JavaScript. So in your case, the value you assign to jsonString is actually already an object.

You need to parse JSON only if it really is in the form of a string. So the actual script part sent to the browser should look like this:

      var cities = {"Auckland":37616,"Wellington":35357,"Christchurch":29818};
      console.log(cities);
      alert( cities.Auckland );

You don't get the alert box because most likely your code throws a JavaScript error and simply stops executing after you try to parse the object.

edited Jul 25 '12 at 23:27

answered Jul 25 '12 at 23:08

Torsten Walter

5,614
23
26

I tried this, but still no dice. No alert box or anything in the console. – devcoder Jul 25 '12 at 23:20
Are the back ticks from your code example part of the string from php? If the string is exactly `{"Auckland":37616,"Wellington":35357,"Christchurch":29818}` everything is fine. – Torsten Walter Jul 25 '12 at 23:24
Sorry, fixed them. They were supposed to be single quotes on here. They are and were single quotes in code but removed now like you suggested – devcoder Jul 25 '12 at 23:27

score 1 · Answer 3 · edited May 23 '17 at 11:48

1

I guess the handler function is never fired: There is no load event on the document object (see window.onload vs document.onload). You don't need to wait for that anyway, because you have nothing in the handler that interacts with the DOM - and you execute it in the bottom of your <body> tag (see Is the 'onload' necessary when the code is at the bottom?).

As JSON is a subset of JavaScript, you can directly output it into a script as a object literal:

var jsonObj = <?php echo json_encode($rowarr); ?>;
console.log(jsonObj);
alert( jsonObj.Auckland );

No need to parse it. Especially, when your JSON had contained an unescaped apostrohe, this would have broken your string literal.

edited May 23 '17 at 11:48

Community

1
1

answered Jul 25 '12 at 23:11

Bergi

630,263
148
957
1,375

I tried this, but still no dice. No alert box or anything in the console. – devcoder Jul 25 '12 at 23:19
OK, I think I found the reason. The script as a whole does run, doesn't it? – Bergi Jul 25 '12 at 23:35
Yes. But I found the fix. Another commentator mentioned that the document.onload needed to be changed to window.onload. Thank you for your help in getting the json object fixed. – devcoder Jul 25 '12 at 23:41

Unable to parse a string into JSON object, unable to display an alert box from javascript

3 Answers3