Get JSON data from external URL and insert in a div as plain text

Question

I have written a function to display some paragraph tags from an external webpage. For some reason the results are displayed in firebug console but not showing on the web page as I wanted (blank page).

function requestCrossDomain(callback){
  var querylink = "select * from html where url='http://somedomain.com'" +  
                     " and xpath='/html/body/div/div/div[2]/div/div/div/dl'";
  var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + 
                encodeURIComponent(querylink) + '&format=json&callback?';

  $.getJSON(yql, function(data){
    if (typeof callback === 'function'){
      callback(data);
      }
   });
}

My firebug console shows the below value.

{"query":{"count":1,"created":"2013-12-23T06:31:46Z","lang":"en-US","results":{"dd":{"p":"Hills: High"}}}}

How can I modify the code to display the value of the P tag, which is "Hills: High"

I'm calling the function from HTML code and trying to display the value inside "#targetWrapper"

requestCrossDomain(function(results){
  $('#targetWrapper').html(results);
});

what do you expect ? that callback(data) triggers requestCrossDomain(? — john Smith, Dec 31 '13 at 03:36

Jason · Accepted Answer · 2013-12-31T03:02:34.100

Edited to reflect a functional fiddle

$(document).ready(function(){
  requestCrossDomain();
});

function requestCrossDomain(){
  var querylink = "select * from html where url='http://www.bom.gov.au/wa/forecasts" +  
                  "/armadale.shtml' and xpath='/html/body/div/div/div[2]/div/div" +  
                  "/div/dl'";   

  var yql = 'http://query.yahooapis.com/v1/public/yql?q=' +
             encodeURIComponent(querylink) + '&format=json&callback?';

  $.getJSON(yql, function(data){
    $('#targetWrapper').html(data.query.results.dl.dd[0].p);
    $("#targetWrapper").append("<br/><strong>" + JSON.stringify(data) + "</strong>");
  });
}

Your data format was very much off the mark AND you cannot have two functions with the same name.

I'm still new to javascript. Can't display the info even after changing the code as you mentioned. Please view my code here http://jsfiddle.net/landy90/pdF3e/2/ — user2574948, Dec 31 '13 at 02:42

score 0 · Answer 2 · answered Dec 31 '13 at 01:04

0

The object you get back from $.getJSON is a simple Javascript Object. You can access it just as you would any other object:

In this case, you'd use:

requestCrossDomain(function(results) {
    $("#targetWrapper").html(results.query.results.dd.p);
}

I would highly recommend that you read the MDN documentation I linked above. Having MDN bookmarked is also a good idea; it's a great resource to have easy access to.

answered Dec 31 '13 at 01:04

J David Smith

4,780
1
19
24

I tried modifying the result as you suggested but still get a blank page. Please view the code here jsfiddle.net/landy90/L9DaL/ – user2574948 Dec 31 '13 at 02:18
I also get an error saying that "TypeError: data.query.results.dd is undefined" – user2574948 Dec 31 '13 at 02:34
@user2574948, that's because your data format is very off the mark. Check my updated answer. – Jason Dec 31 '13 at 03:04

Get JSON data from external URL and insert in a div as plain text

2 Answers2