Codeigniter - sending json to script file

Question

I query the db i my model like so

function graphRate($userid, $courseid){
    $query = $this->db->get('tblGraph');
        return $query->result();
}

My controller gets data back from my model and I json encode it like so

if($query = $this->rate_model->graphRate($userid, $courseid)){
    $data['graph_json'] = json_encode($query);      
}
$this->load->view('graph', $data);

And thats returns me a json object like so

[
 {"id":"1","title":"myTitle","score":"16","date":"2013-08-02"},
 {"id":"2","title":"myTitle2","score":"17","date":"2013-09-02"},
 {"id":"3","title":"myTitle3","score":"18","date":"2013-10-02"}
]

In my view graph I'm loading an js file

<script type="text/javascript" src="script.js"></script>

Now I want to use $data that is being sent from my controller to my view, to my external script.js to use as labels and data to feed my chart. But How do I get that Json data to my external script.js so I can use it?

1 more thing about the json data, isn't it possible to get the output of the json data as

{
 "obj1":{"id":"1","title":"myTitle","score":"16","date":"2013-08-02"},
 "obj2":{"id":"2","title":"myTitle2","score":"17","date":"2013-09-02"},
 "obj3":{"id":"3","title":"myTitle3","score":"18","date":"2013-10-02"}
}

Answer 1

The problem isn't a Codeigniter problem, it's a javascript scope/file inclusion/where-do-i-get-my-data-from problem.

I run into this all the time and have used these solutions:

1. naming my php files with .php extensions and loading them as if they're views.
2. Just putting the script that needs data from a view IN the view file where it's used
3. Using an ajax request in my included js file to hit a controller and get json data.

I use #2 most frequently (for things like datatables where I WANT the js code right there next to the table it's referencing.

I use #1 occasionally, but try NOT to do that because it means some .js files are in my webroot/js dir and some are in teh application/views directory, making it confusing for me or anyone else who wants to support this project.

#3 is sometimes necessary...but I like to avoid that approach to minimize the number of requests being made and to try to eliminate totally superfluous requests (which that is).

Answer 2

You need to print the result of the output json string to the html generated file. But you need to parse the string with some script. I would recommend you: http://api.jquery.com/jQuery.parseJSON/

For the second question. It is possible by doing:

$returnValue = json_encode(
  array (
    "obj1" => array("id"=>"1","title"=>"myTitle","score"=>"16","date"=>"2013-08-02"),
    "obj2" => array("id"=>"2","title"=>"myTitle2","score"=>"17","date"=>"2013-09-02"),
    "obj3" => array("id"=>"3","title"=>"myTitle3","score"=>"18","date"=>"2013-10-02"),
  )
);

Answer 3

Print the output using PHP like:

echo json_encode($query);

Then from the client-side (where JavaScript resides) load that JSON that you printed using PHP. This can be done easily using JQuery.

Like this:

$.get("test.php", function(data) {
  alert("Data Loaded: " + data);
});

You can find more information about this here: http://api.jquery.com/jQuery.get/

Now you'll need to parse this data so that JavaScript can understand what you got as text from the server. For that you can use the JSON.parse method on the "data" object in the aforementioned example. Once parsed, you can use the object like any other object in JavaScript. You can find more information about JSON.parse here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

I hope that helps.