ansaurus

Question

need direction regarding jquery and json

Answer 1

+1 A:

Searching for jquery json turned up this page first, which seems to be exactly what you need: jQuery.getJSON()

Matthew Scharley 2010-07-11 22:32:59

Answer 2

+3 A:

It should be as easy as this:

<script type="text/javascript">
  jQuery.getJSON('http://ws.geonames.org/weatherJSON?north=90&amp;south=-9.9&amp;east=-22.4&amp;west=55.2', function(data) {
    // The JSON object is now in the data variable --
    // process it here; for example:
    alert(data.weatherObservations[0].clouds);
  });
</script>

Keep in mind, however, that your AJAX call must come from the same domain (ws.geonames.org), since most modern browsers do not allow cross-domain requests. The workaround is to use the JSON-P format instead of pure JSON.

... In response to rookie's edits to his original question, here is a more complete solution:

<html><head></head><body>
  <div id="para"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <script>
    jQuery.getJSON('http://ws.geonames.org/weatherJSON?north=90&amp;south=-9.9&amp;east=-22.4&amp;west=55.2', function(data) {
      jQuery.each(data.weatherObservations, function(i,item){
        jQuery("<p/>").html(item.temperature).appendTo("#para");
      });
    });
  </script>
</body></html>

Mark Eirich 2010-07-11 22:43:23

__Except__ that JSON-P requires cooperation from the server. It needs to return JavaScript that calls the callback you specify. So it won't work in this case.

darkporter 2010-07-11 23:11:01

redsquare 2010-07-12 00:05:32

Hi, I'd really appreciate help with my edited doubted above. Thanks.

rookie 2010-07-12 16:46:00

@rookie - see my edited answer. Use the jQuery html() function to put content into the paragraphs, rather than the attr() function.

Mark Eirich 2010-07-13 01:06:24

Hi Mark, I'd really appreciate your help with the re-edit. Thanks!

rookie 2010-07-13 03:16:19

Okay, got it: To get that last one to work, use this instead of getJSON(): `jQuery.get(url, function(data) { /*...*/ }, 'jsonp');`

Mark Eirich 2010-07-13 04:37:42

Answer 3

+2 A:

To help you read the content that's comes back, put it into http://jsbeautifier.org/ and it will format it so it is readable.

In addition to Mark's answer, you should verify the textStatus

http://jsfiddle.net/VC5c2/

var url = "http://ws.geonames.org/weatherJSON?north=90&amp;south=-9.9&amp;east=-22.4&amp;west=55.2";

jQuery.getJSON(url,function(data, textStatus) {
    if (textStatus == "success") {
        for (idx in data.weatherObservations) {
            var wo = data.weatherObservations[idx];
            console.log("Temperature at " + wo.stationName + ":  " + wo.temperature);
        }
    }
});

rchern 2010-07-11 22:50:28

I'm sorry if my question seems really simple. But I cannot understand why I would need to verify the textstatus? What I'm trying to ask is, what purpose does it serve? Thanks.

rookie 2010-07-12 00:51:36

It is a value letting know that if it was a success. Double check, but I think the values are "timeout", "error", "notmodified", "success", "parsererror". If there's an error, you want to know, right?

rchern 2010-07-12 01:11:50

Yeh, that makes sense. So it serves the purpose of the try catch block in java. Thank you.

rookie 2010-07-12 03:11:42

ansaurus

tags:

views:

answers:

need direction regarding jquery and json

related questions