CODEWITHSUNDEEP
javascriptjqueryjsonjsonpyahoo-pipes
Ian
Ian

Reputation: 6134

Retrieving data fron JSON files

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.

Upvotes: 1

Views: 598

Answers (2)

kritzikratzi
kritzikratzi

Reputation: 20231

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);
}
​

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 1

Related Questions