Guidance for retrieving JSON data into Javascript

Question

I have searched here and on Google, but as an inexperienced Javascript hack I'm struggling to find a good example of what I believe is a rather straight forward action.

I have a server-side script that I have coded to provide JSON formatted output (content.php?action=json).

The JSON output is multi-dimensional, ie it is formatted as ...

 [Content]
   [Class 1]
     [Entry 1]
     [Entry 2]
     [Entry 3]
      ...
  [Class 2]
     [Entry 1]
     [Entry 2]
      ...

Both the number of classes and entries are variable.

I am now trying to write a simple Javascript to do the following ...

1) Call my PHP script
2) Copy the returned JSON output into a suitable Javascript array
3) Display parts of this array within my HTML pages

There are a number of "bits" of this puzzle, but I am struggling to put this together. Would anyone put a simple example together for me?

A couple of side questions ...

(i) Does the output file containing the JSON data need to have it's HTML headers altered to indicate it's content type?
(ii) Is jQuery the best approach for this sort of thing?

Thanks in advance. Pete

I wrote my own json output of dropbox for a facebook app. A working example is shown @ http://apps.facebook.com/fileglu/technical — Alvin K., Nov 18 '11 at 18:47

phixr · Accepted Answer · 2011-11-18T18:04:39.693

2

jQuery does provide a very easy approach to ajax calls:

$.ajax({
    url: '/path-to-php-script',
    type: 'get',
    dataType: 'json',
    success: function(json) {
        // gets run after ajax call is successful
        // do stuff with json object
        // format: json.content.class[0].entry[2]
    }
});

Providing dataType: 'json' will automatically eval the response from your php script into a json object.

Here's the jQuery documentation on ajax calls: http://api.jquery.com/jQuery.ajax/

edited Nov 18 '11 at 18:04

answered Nov 18 '11 at 17:57

phixr

476
4
8

1

I thought I'd point out that there is a bit of a typo, missing the closing `'` after `'json`. – jli Nov 18 '11 at 18:03

score 2 · Answer 2 · answered Nov 18 '11 at 17:59

You can control the format of your json data when you create it so you don't need to copy it into an array once you have retrieved it.

$.get("your_php_script.php",
   function(data){
      // update html with json ( in data )
   }, "json");

http://api.jquery.com/jQuery.get/

To answer your side questions

i) the content type for json is application/json ii) jQuery is the a good ( and popular ) way to retrieve your json as it abstracts away the different methods that browsers will make an ajax request.

score 2 · Answer 3 · edited May 23 '17 at 11:57

(i) the content type can just be plain text. However to be correct, see What is the correct JSON content type?

(ii) jQuery will make fetching and parsing the JSON very easy, although there are other libraries that do this as well. Many people advocate jQuery due to its usability, though.

Now to answer your main question, using jQuery:

$.getJSON('content.php?action=json', function(data) {
    // data returns the result of the request, and will be the array
});

See http://api.jquery.com/jQuery.getJSON/

Guidance for retrieving JSON data into Javascript

3 Answers3