How to parse json string in javascript object

I have a json line like this:

{"total":"3","data":[{"id":"4242","title":"Yeah Lets Go!","created":"1274700584","created_formated":"2010-07-24 13:19:24","path":"http:\/\/domain.com\/yeah"}{"id":"4242","title":"Yeah Lets Go!222","created":"1274700584","created_formated":"2010-07-24 13:19:24","path":"http:\/\/domain.com\/yeah222"}{"id":"4242","title":"Yeah Lets Go!333","created":"1274700584","created_formated":"2010-07-24 13:19:24","path":"http:\/\/domain.com\/yeah333"}]} 

Will I need to parse it into a javascript object that I believe in? And then in html like:

 <a href="http:www..domain.com/yeah">Yeah Lets Go!</a> <p class="date">Created: 2010-07-24 13:19:24"</p> 

but I don’t know how to disassemble it and so on.

I get this line from this:

 $('a.link').click(function() { var item_id = $(this).attr("href").split('#')[1]; $.get(base_url+'/ajax/get_itema/'+item_id+'/0/3/true', null, function(data, status, xhr) { $('#contentCell').html(data); }); 
+4
source share
6 answers

Use the JSON.parse function to convert a JSON string to a JS object. Most modern browsers include JSON.parse , but it is also included in json2.js if you need a reserve for older browsers.

+5
source

Since you are using jQuery, see .getJSON()

The way to use .getJSON() :

 jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) 

url is, of course, the url from which you get the data. [ data ] - this is the material that you send to the server. [ callback(data, textStatus) ] is a function that processes data , returning the server from . You can usually leave the second argument to textStatus . The returned data is understood as JSON. .getJSON() is a shorthand for calling .ajax() , which sets the JSON data.

So, in your case, it will be something like this (note that I changed the JSON returning from the server to response ... this is a less confusing nomenclature in your case than using data , since you have data in your JSON ):

 $.getJSON(base_url+'/ajax/get_itema/'+item_id+'/0/3/true', function(response) { ... }); 

So, to restore things from response we simply access them using point and square notation. To get the first set of data :

 response.data[0].title \\ <== "Yeah Lets Go!" response.data[0].path \\ <== "http://domain.com/yeah" 

The above example looks in response , which is our JSON object. Then he looks at the first data elment (there are 3) and selects title in the first line, and path in the second.

Since you are using jQuery, you can use .each() to .each() over your 3 data , like this:

 $.each(response.data, function(index, value) { $("body").append('<a href="' + value.path + '">' + value.title + '</a>'); $("body").append('<p class="date">Created: ' + value.created_formated + '</p><br />'); }); 

JsFiddle example

.each() safe loop over a set of elements. The first argument to .each() is the object you want to .each() over. This response.data not just response . This is because we want to look at response.data[0] , response.data[1] and response.data[2] . The second argument to .each() is a callback function or what we want to do with each of the elements we iterate. Inside the callback function, the first argument is automatically the index of the element (0, 1, or 2 in your case). The second argument is the value of the element. In your case, this is a separate object: response.data[0] , response.data[1] and response.data[2] respectively. We can use point notation to extract the things that we want to get directly from these objects. In the above example, we are accessing .path . .title and .created_formated from each of value s.

This will do all your function:

 $.getJSON(base_url+'/ajax/get_itema/'+item_id+'/0/3/true', function(response) { $.each(response.data, function(index, value) { $("body").append('<a href="' + value.path + '">' + value.title + '</a>'); $("body").append('<p class="date">Created: ' + value.created_formated + '</p><br />'); }); }); 

Of course, you probably want to add an answer to (a) a specific element / s.

Here is some good information when using .getJSON() to access multidimensional JSON data from another SO question.

Here is some general JSON information in Javascript .


Note:

You need commas between your braces!

You have:

 ...p:\/\/domain.com\/yeah"}{"id":"4242","title"... 

You need:

 ...p:\/\/domain.com\/yeah"}, {"id":"4242","title"... 
+3
source

Having a div with id result to get html, something like:

 $.getJSON(base_url+'/ajax/get_itema/'+item_id+'/0/3/true', function(data) { $("#result").empty(); $.each(data.data, function(i, d) { $("#result").append("<a href='" + d.path + "'>" + d.title + "</a>" + "<p class='date'>Created: " + d.created_formated + "</p>"); } }); 
+3
source

I did not find a single answer that the data you posted is NOT valid. JSON string . This is probably your main problem and the reason $.get cannot convert the server response to an object. Objects inside the data array must be separated by commas . So the data should look like

 { "total": "3", "data": [ { "id": "4242", "title": "Yeah Lets Go!", "created": "1274700584", "created_formated": "2010-07-24 13:19:24", "path": "http:\/\/domain.com\/yeah" }, { "id": "4242", "title": "Yeah Lets Go!222", "created": "1274700584", "created_formated": "2010-07-24 13:19:24", "path": "http:\/\/domain.com\/yeah222" }, { "id": "4242", "title": "Yeah Lets Go!333", "created": "1274700584", "created_formated": "2010-07-24 13:19:24", "path": "http:\/\/domain.com\/yeah333" } ] } 

I recommend you all check out the JSON strings at http://www.jsonlint.com/ .

+1
source

Try a template engine that converts JSON to HTML in a browser.

You can take a look at pure.js , it is very fast, and keep the HTML completely clean of any Javascript template logic. We use it to generate all the HTML from the JSON data in our web application. (Yes ... I am the main source of lib)

If you are more familiar with the <% ...%> or $ {...} templates, there are many for every taste if you are searching the Internet for a javascript template .

0
source

using Oleg’s response data

 var json = {} // your json data reformated by Oleg for (var i = 0; i < json.data.length; i++) { document.write('<a href="' + json.data[i].path.replace(/\\/g, '') + '">' + json.data[i].title + '</a>'); document.write('<br>'); document.write('<p class="date">Created: ' + json.data[i].created_formated +'</p>'); document.write('<br>'); } 

remember that "data" is an array of an object

0
source

All Articles