1

I am having issues displaying the data that I am getting from the JSONP service on another domain. I have been following the numerous tutorials and guides out there but can not get to the stage of displaying it on the webpage.

What I am trying to do is use javascript to display the returned JSON object on an HTML page.

I can see the JSON object being returned and I can actually view it using Fiddler, but I am just not able to get to the next stage and actually produce it on the page.

I have been following this example What is JSONP all about? more specifically the Twitter explanation and have been trying to adapt it to my own needs.

From what I understandmyCallbackthat is at the end of the URL below refers to a function which I have to define. 

<script src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>

<script>
function myCallback(jsonData) {...}
<script>

If I am right so far how do I generically access the jsonData and display everything on the page?

Can someone please give me a generic example of how to handle this, with an explanation on what they are doing?

I know this has been asked a 100 times but I just need to be pointed in the right direction. Thanks guys.

Community
  • 1
  • 1
Corey
  • 1,733
  • 4
  • 18
  • 26
  • `jsonData` is most likely an object or array. You can read about how to work with objects and arrays in the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects?redirectlocale=en-US&redirectslug=JavaScript%2FGuide%2FWorking_with_Objects, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Referring_to_Array_Elements – Felix Kling Dec 11 '13 at 04:48
  • Hey @Felix Kling I have been looking at your post http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json as I relised that it would be an array so have been trying to access it as was explained. – Corey Dec 11 '13 at 04:54

1 Answers1

2

One problem with the code is that it is not making a JSONP request - well, it is, but not in an asynchronous fashion! Instead the code is using the result of a request as a "normal" non-dynamic script source target and, by default, scripts elements load scripts synchronously.

In this case the posted HTML will result in a ReferenceError (check the error console) as myCallback has not been defined when the JSONP script source is evaluated. One "fix" would be to put the script with myCallback first - at least then it should be called with the data.

To fetch JSONP asynchronously wrt the HTML document, either load the JSONP script element dynamically (such as in "onload") or use a wrapper (e.g. jQuery.ajax) to automatically wrap/dispatch the JSONP request. The async attribute might also be an option, but it is not universally supported.

Once the data is obtained, then it must be used in a meaningful way. I'm not sure what "meaningful" is in context. In any case, the following should display an alert with the data sent back:

<!-- ensure the function is defined first -->
<script>
// data is /not/ JSON, just a normal JavaScript value ..
function mycallback(data) {
    // .. and turn the data into a JSON string for display
    // (`debugger` and `console.log` will be more useful for exploring)
    alert(JSON.stringify(data))
}
</script><!-- make sure to use valid HTML -->
<script src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=mycallback"></script>

I've also updated the code to use mycallback instead of myCallback (note the capitalization differences) because executing the request with callback=myCallback resulted in mycallback(..) in the response .. which will never invoke a function named myCallback. I don't know why the case was collapsed - it's either a bug or a "feature" of the Twitter API.

user2864740
  • 60,010
  • 15
  • 145
  • 220
  • Ok I have seen a few examples examples of the URL being written dynamically is this typically prefered or would I be better off using JQuery? – Corey Dec 11 '13 at 05:04
  • 1
    @Corey I use jQuery because 1) It works and 2) I'm lazy. Some problems are fun to re-solve. To me, this is not one of them. (jQuery is not the only option that wraps JSONP requests.) – user2864740 Dec 11 '13 at 05:05
  • Sorry another quick question you say the **data** is a variable why does it not contain the JSON object? – Corey Dec 11 '13 at 05:19
  • 1
    @Corey [JSON](http://json.org) is a *textual data representation*, like XML. However, here `data` represents a *real* JavaScript value/object. If it *was* JSON (in a string), then you'd need to do something like: `var data = JSON.parse(jsonData)` to use the data as anything other than a string. But this is not required here as JSONP passes a real JavaScript object (and not the JSON representation of such) to the callback. – user2864740 Dec 11 '13 at 05:20
  • @Corey Look at the response: `mycallback({"errors":[{"message":"Sorry, that page does not exist","code":34}]});` -- that's *real* JavaScript that is executed and is "just a normal function call" passing in a "real JavaScript object". (But I see a problem: it changed `callback=myCallback` to `mycallback(..)`; I've updated my answer accordingly.) – user2864740 Dec 11 '13 at 05:26
  • How are you getting these errors? I have just changed the src script to a lowercase 'c' and now in the firefox developer tools I am getting back data that looks like a string. Otherwise anything else within the other script tags is not run including the alert or anything else that I have in there. – Corey Dec 11 '13 at 07:03
  • @Corey Browse to: http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=mycallback (or whatever JSONP URL is being used) - what do you get? Does this agree with what you are seeing in the developer tools? – user2864740 Dec 11 '13 at 07:11
  • Oh okay yes it does. Why would the other script not be executed? Is it something to do with the fact that they are both being executed at the same time? – Corey Dec 11 '13 at 07:29
  • @Corey Scripts elements that appear in the HTML markup are executed *synchronously* and *in order* (excepting application of the `async` attribute). This is why the "mycallback" script *must* appear first in this situation - because both script elements are in the HTML markup and are thus executed *synchronously* and *in order*. – user2864740 Dec 11 '13 at 07:48
  • Ok, thanks for your patience I really appreciate it! – Corey Dec 11 '13 at 08:38