?
Solved

Manipulate JSON with jQuery

Posted on 2010-01-04
9
Medium Priority
?
1,735 Views
Last Modified: 2013-11-08
I'm having some trouble working with jQuery and JSON, I can't work out how to work with the JSON object. I need to be able to work with each section of the object just like I would with an array, my first goal is is to just display ever part of the JSON object to the user.

A little section of my code is below. I'm performing a cross domain ajax call because this is executed from within a Google Chrome Extension that has access :

$.ajax({
  url: 'http://suggestqueries.google.com/complete/search?hl=en&gl=au&q=jquery',
  cache: false,
  success: function(data){
    // Work with the JSON
  }
});
0
Comment
Question by:TotallyMe
  • 4
  • 4
9 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26178021
0
 

Author Comment

by:TotallyMe
ID: 26179333
Yeah I tried that one and it works perfect but I'd prefer to use the $.ajax method as it gives me a bit more control on future things I'll need to add
0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26180457
Just add a data type to your ajax query
$.ajax({
  url: 'http://suggestqueries.google.com/complete/search?hl=en&gl=au&q=jquery',
  cache: false,
  dataType:"json",
  success: function(data){
    // Work with the JSON
  }
});

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:TotallyMe
ID: 26180668
Hi Terry,
When I set the dataType the data object is empty but when I don't use a dataType I can see the data with the following code:

$.ajax({
  url: 'http://suggestqueries.google.com/complete/search?hl=en&gl=au&q=jquery',
  cache: false,
  dataType:"json",
  success: function(data){
    $('#result').text(data);
  }
});      

Not sure why this would be?
What I need to do is know how to set $('#result') to display a value from the json.
0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26180753
As the data comes cross domain you need to use jsonp

Here's the docs

http://docs.jquery.com/Ajax/jQuery.ajax#options

http://ajaxian.com/archives/jsonp-json-with-padding
$.ajax({
  url: 'http://suggestqueries.google.com/complete/search?hl=en&gl=au&q=jquery',
  cache: false,
  dataType:"json",
  success: function(data){
    $('#result').text(data);
  }
});

Open in new window

0
 
LVL 10

Accepted Solution

by:
Terry_focus earned 2000 total points
ID: 26180758
sorry here's the code
$.ajax({
  url: 'http://suggestqueries.google.com/complete/search?hl=en&gl=au&q=jquery',
  cache: false,
  dataType:"jsonp",
  success: function(data){
    $('#result').text(data);
  }
});

Open in new window

0
 

Author Comment

by:TotallyMe
ID: 26181179
Thanks terry, Turns out that google isn't returning pure json it's actually javascript. I've switched to another json file and now I'm have more success. I don't believe I need to use jsonp now that this appears to be working, the reason it works is due to the cross domain permissions that Google Chrome Extensions recieve.

So this is my code :
$.ajax({
  url: 'http://ff.search.yahoo.com/gossip?output=fxjson&command=test',
  cache: false,
  dataType: "json",
  success: function(data){
    $.each(data, function(i,item){
      $("#result").append(i + ' - ' + item + '<br>');
    });
  }
});

And it returns :
0 - test
1 - iq test,speed test,typing test,personality test,pregnancy test,act test,bandwidth test,testosterone,testicular cancer,career test
2 -
3 -

How would I iterate through each of the values currently displayed under key "1".

I'd like the output to be:
0 - iq test
1 - speed test
2 - typing test
....
...
..
0
 

Author Comment

by:TotallyMe
ID: 26187250
Worked it out using :
$.each(data[1], function(key, item){
0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26188281
Sorry I caught in terrible snow yesterday before I could answer the other part of your question. You can get your search results using the 'jsonp' datatype. Thanks for the points
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question