Retrieving data fron JSON files

Question

I am trying to use JQuery's JSONP feature to retrieve barometric pressure data from a website.

First, I used Yahoo! Pipes to convert the XML data to JSON. Then I tried to receive and use that data in an alert, but it didn't work. In this JSFiddle, I have a simple, working example, but when I try use the more advanced JSON file, it doesn't work.

See also this article by IBM.

**1.)** You have to choose jQuery in JSFiddle instead of (default) Mootools. **2.)** Open your browser's javascript console and see the occurring errors. **3.)** You haven't defined the callback function! — ComFreek, May 26 '12 at 14:18
It says that `data.value` is undefined in the error console, even after adding the `http://` and changing to JQuery (which I had added in the resources). — Ian, May 26 '12 at 14:37
it seems you are just learning javascript. i can only suggest for next time try to make tests in smaller increments. understand which parts fail and why. if you just write a bunch of code and then guess what the problem is you will always end up having misleading titles like in this question (really: i downvoted because the actual issue has absolutely nothing to do with the title). also you can look at my answer, i corrected your code and the alert spits out the pressure value. good luck with your project! — kritzikratzi, May 26 '12 at 15:12
It's not that I am just learning JavaScript, but I am new to JSON and JQuery. I definitely learned a lot working on this. — Ian, May 26 '12 at 15:22
I changed the name; I think it works a bit better for the community — Ian, May 30 '12 at 12:12
BTW, here is the final product in case anyone is interested: http://jsfiddle.net/iansan5653/7EPjH/16/ — Ian, May 30 '12 at 12:20

thecodeparadox · Accepted Answer · 2012-05-26T15:02:10.643

1

Problems in your code

You forget to include http:// in your link

You need to try this (see alert. It will alert the title)

<div onClick="$.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=467a55b506ba06b9ca364b1403880b65&_render=json&textinput1=40.78158&textinput2=-73.96648&_callback=?', function(data){alert(data.value.title)})">Click Me</div><!--I can't get this to work-->

DEMO

But its better to use like following:

<div class="loadjson">Click Me</div>


function barometer() {
    $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=467a55b506ba06b9ca364b1403880b65&_render=json&textinput1=40.78158&textinput2=-73.96648&_callback=?', function(data) {
        alert(data.value.title);
    })
}

$('div.loadjson').on('click', function() {
    barometer();
});

Note: $.getJSON() returns two parameters within data object.

     - 1st one is `count` that have integer value
     - 2nd one is `value`, which is an `Object`.

To get the second parameter you need to use data.value.

DEMO

edited May 26 '12 at 15:02

answered May 26 '12 at 14:25

thecodeparadox

86,271
21
138
164

Sorry, I don't have firebug. What is the point of adding the console.log? In your demo, clicking on the div still didn't bring up the alert. Thanks – Ian May 26 '12 at 14:32
@Ian if you're going to be doing JS development I think it would be strongly encouraged to learn firebug or how to use another browser's JavaScript console. http://stackoverflow.com/questions/55633/where-is-the-console-api-for-webkit-safari – KeatsKelleher May 26 '12 at 14:35
@Ian I make my fiddle with `alert()`, but you should use to learn firebug – thecodeparadox May 26 '12 at 14:36
I don't use Firebug because I can just use the Firefox Dev Tools (and Firebug is one of the slowest Firefox addons). I see the alert now, but not with my way to get to the barometer,which means that `data.value.items.data.parameters.pressure.value` is incorrect. Any ideas on that? I checked the JSON file after running it through a JavaScript tidying program, but I can't figure out what is wrong with that path. – Ian May 26 '12 at 14:43
Actually, I;'ve got it working now. The only problem I am having is that when I get to `parameters`. There are two `parameters` under `data`, so how do I select the second one? – Ian May 26 '12 at 14:57
Got it by using `data[1].parameters` which worked perfectly. `data.value.items[0].data[1].parameters.pressure.value`. – Ian May 26 '12 at 15:17
With deeply nested JSON figuring out the tree/path can cause headaches for some thankfully there are a few online tools like this one http://lovelogic.net/support_articles/JSON_XML_parser_demo.php that can decode XML and JSON into something that makes more sense. – Skizz Jun 01 '12 at 19:29

score 1 · Answer 2 · answered May 26 '12 at 15:03

there were many many many problems with the code i fixed it and commented on the problems inline ...

jsfiddle here: http://jsfiddle.net/kritzikratzi/LQcVd/

function loadBarometerData(){
    // 1. it's not generally bad practice to put stuff in the 
    //    onClick listeners, but really... don't put such long code there! it's not readable ... 
    // 2. you were missing a "http://" and it was downloading
    //    jsfiddle.net/pipes.yahoo.com/....
    // 3. getJSON doesn't return a result immediately, you need to use callbacks for that!! 
    $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=467a55b506ba06b9ca364b1403880b65&_render=json&textinput1=40.78158&textinput2=-73.96648&_callback=?' ).success( barometer ); 
}; 

function barometer(data) {
    console.log( data );
    // 4. you had items instead of items[0]
    //    similar with data. 
    alert(data.value.items[0].data[1].parameters.pressure.value);
};

function showPrice(data) {
    alert("Symbol: " + data.symbol[0] + ", Price: " + data.price);
}

Retrieving data fron JSON files

2 Answers2