How to use JSON from db/php in JavaScript

Question

I'm using a map plugin to render some data. The data comes from the DB and into a json file - the script works great. I decided to use the data directly from the php output instead of making a json file. For some reason the javaScript doesn't accept the direct php input. I'm using codeigniter MVC

Here is the sample code that currently works:

$.getJSON('_data/index/data.json', function(data){ ...

Here is what I tried:

 var dataMap = '<? print $mapData;?>';
        $.getJSON(dataMap, function(data){...

* EDIT 2 *

Based on the answers - this option doesn't work either.

var dataMap = '<?php echo $mapData;?>';
        $.get(dataMap, function(data){...

And here is the json data

{"countries":{"AL":"1","GB":"1","RS":"1","BG":"6","CA":"3","AT":"2","CD":"1"}}

EDIT

$mapData is

FOREACH LOOP
 $retdata['countries'][] = strtoupper($row->code);
 $retdata['num'][] = $row->num;
ENDFOREACH LOOP
 $retdata['countries'] = array_combine($retdat['code'], $retdata['num']);
 $retdata = json_encode($retdata);

And then it is printed into a file as normal. This is into the model, then I pass it to the controller and then into the view. The string is the same in the $dataMap that I have on file and the one that is being sent to the view.

Can you show us what $mapData is? $.getJSON is a shortcut for an ajax request to the server. i.e. it should be a path/url to something which returns json data. — peacemaker
– peacemaker, Commented Dec 3, 2012 at 19:25
the print_r($mapData) is the same as the json data above. When I use echo the console adds the json to the link and prints a 403 (Forbidden) jquery.min.js:2 — Ando
– Ando, Commented Dec 3, 2012 at 19:29
Great, looks like you can just use $mapData directly as it's already a json string — peacemaker
– peacemaker, Commented Dec 3, 2012 at 19:41

Mike Brant · Accepted Answer · 2015-08-19 21:02:46Z

3

If you are just going to directly insert your JSON data into a javascript variable (rather than using AJAX), then you shouldn't need a getJSON call at all. Just write the object directly like this.

var js_object = <?php echo $mapData; ?>;
alert(js_object.countries.AL);
alert(js_object.countries.GB);

Note that the PHP string is not echoed into enclosing quotes, this means you are directly creating a javascript object literal, not a string that then needs to be parsed into an object via JSON.parse()

edited Aug 19, 2015 at 21:02

answered Dec 3, 2012 at 19:33

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

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

1 Comment

Mike Brant Over a year ago

I guess I am not following what you are trying to do. You don't need any get or getJSON at all if you just inject the JSON object into a javascript variable when creating the page source. You can then use this object in whatever function you want. See my update answer for example of how to use the object.

peacemaker · Accepted Answer · 2012-12-03 19:39:40Z

1

Following on from your updated code, it looks like you don't need to call getJSON at all as you already have json data.

Simply take <? echo $mapData;?> and assign it to a variable in your javascript code and use it directly.

answered Dec 3, 2012 at 19:39

peacemaker

2,5914 gold badges28 silver badges49 bronze badges

Comments

Matheus Azevedo · Accepted Answer · 2012-12-03 19:41:51Z

1

Just use dataMap as a JSON directly.

alert(dataMap.countries.AL); //output: 1

answered Dec 3, 2012 at 19:41

Matheus Azevedo

9087 silver badges18 bronze badges

Comments

tonyjmnz · Accepted Answer · 2016-03-07 20:58:32Z

1

+50

Although the given answers do work, you might want to implement it differently so your code is easier to maintain.

You could have a controller that handles all your api calls, and place all your map-related functions there.

If your controller is called maps and you create a countries method that fetches from the database and returns a json with the countries, then in your JS you could do:

$.get('maps/countries', function(data){
  console.log(data.countries);
  //outputs: {"AL":"1","GB":"1","RS":"1","BG":"6","CA":"3","AT":"2","CD":"1"}
};

Collectives™ on Stack Overflow

How to use JSON from db/php in JavaScript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related