How to extract data from JSON string by using JQuery

[eluser]mi6crazyheart[/eluser]
Hey Guys,
I'm PHP developer but this is first time i'm working with some JSON stuff & high level of javascript which i really not habituated a lot. Right now i've stuck at one positions from where i'm not getting any route to move forward.

The matter is..

I've a JSON string like this :

Code:

[{"ThreadID":"213","ThreadTitle":"Christian Heilmann's talk for the why of HTML5 for games development","ThreadAuthorFirstName":"Suresh kumar"},{"ThreadID":"208","ThreadTitle":"The PHP Switch Statement","ThreadAuthorFirstName":"Suresh kumar"},{"ThreadID":"212","ThreadTitle":"DaVinci prototype on Xbox Kinect","ThreadAuthorFirstName":"Suresh kumar"}]

and, i want to extract the data from that JSON string by using JQuery & show in a HTML page in this manner..

" ThreadID-ThreadAuthorFirstName-ThreadTitle "

It's from 2days i'm googling a lot & made number of futile attempt. But, yet now no luck.. . So, Is there any JQuery ninja who can help & show me some path...

[eluser]rdjs[/eluser]
Is this what you need?

jQuery parse JSON

Code:

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

[eluser]Victor Michnowicz[/eluser]
This should get you started on the right track:

Code:

var obj = jQuery.parseJSON('{"json":[{"ThreadID":"213","ThreadTitle":"Christian Heilmann\'s talk for the why of HTML5 for games development","ThreadAuthorFirstName":"Suresh kumar"},{"ThreadID":"208","ThreadTitle":"The PHP Switch Statement","ThreadAuthorFirstName":"Suresh kumar"},{"ThreadID":"212","ThreadTitle":"DaVinci prototype on Xbox Kinect","ThreadAuthorFirstName":"Suresh kumar"}]}');
            
for (var i in obj.json) {
    alert(obj.json[i].ThreadID);
}

The jQuery function .getJSON() could come in handy depending on how you are accessing your JSON.

Make sure you escape your apostrophes too.

[eluser]mi6crazyheart[/eluser]
Thx u @rdjs & @elvicmic for u'r quick replies...

@elvicmic Your piece of code worked like a charm. I just modified it as u'd suggested by using getJSON(). Here is that piece of code. But, it's not working. Can u help me to figure out what's going wrong...

Code:

$.getJSON("http://localhost/CI/index.php/welcome/chromeExtension", function(data) {
   var obj = jQuery.parseJSON(data);
   for (var i in obj.json)
   {
       alert(obj.json[i].ThreadID);
   }
});

[eluser]Victor Michnowicz[/eluser]
.getJSON returns the JSON object, so you don't need to convert it again using .parseJSON().

I think this should work:

Code:

$.getJSON("http://localhost/CI/index.php/welcome/chromeExtension", function(data) {
    for (var i in data)
    {
        alert(data[i].ThreadID);
    }
});

I recommend Firebug when dealing with this kind of stuff. It can help a lot. Make sure you set your headers correctly too.

[eluser]mi6crazyheart[/eluser]
@elvicmic Sorry for late reply. Again u'r above code worked without any problem. Thx a lot for that. But, the thing is that.. i'm doing all these for a google chrome extension. So, when i use above code inside my chrome extension it giving error like...

"XMLHttpRequest cannot load http://localhost/CI/index.php/welcome/chromeExtension. Origin chrome-extension://fddehjfinihjhhcnolbpbhckaagaefbp is not allowed by Access-Control-Allow-Origin.
localhost/CI/index.php/welcome/chromeExtensionFailed to load resource"

May b that why u'd suggested that "set headers correctly" . But, still using those headers in my controller function.. i've no luck(may be i'm not using the headers properly in side that controller function)..

My controller function is like this...

Code:

function chromeExtension()
{
    $this->load->model('home/welcome_page_model');
    $data = $this->welcome_page_model->latestThreadsForChromeExtension();

    $this->output->set_header('Last-Modified: '.gmdate('D, d M Y H:i:s', $last_update).' GMT');
    $this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate");
    header('Content-type: application/json');

    echo json_encode($data);
}

For headers i'm using codeigniter output class : http://ellislab.com/codeigniter/user-gui...utput.html

[eluser]Victor Michnowicz[/eluser]
I think the problem is that JSON is subject to same origin policy.

JSONP should be the answer. I have never dealt with JSONP, however. Maybe these links can help you out?:

http://api.jquery.com/jQuery.getJSON/#jsonp

http://api.jquery.com/jQuery.ajax

http://bob.pythonmac.org/archives/2005/1...son-jsonp/

http://1080d.com/lang/en-us/2009/10/conv...on_encode/