[英]How to parse json string to javascript object
I have this kind of json string: 我有这种json字符串:
{"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 would need to parse it to javascript object i believe? 我需要将它解析为javascript对象我相信吗? And then into html like:
然后进入html像:
<a href="http:www..domain.com/yeah">Yeah Lets Go!</a>
<p class="date">Created: 2010-07-24 13:19:24"</p>
but I have no clue how to parse it and so on. 但我不知道如何解析它等等。
I get that string 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);
});
Since you're using jQuery, take a look at .getJSON()
既然您正在使用jQuery,请查看
.getJSON()
The way you use .getJSON()
is: 你使用
.getJSON()
是:
jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )
url
is of course the url
you're getting the data from. url
当然是你从中获取数据的url
。 [ data ]
is the stuff you send to the server. [ data ]
是您发送到服务器的内容。 [ callback(data, textStatus) ]
is a function that handles the data
coming back from the server. [ callback(data, textStatus) ]
是一个处理从服务器返回的data
的函数。 You can generally leave out the second argument textStatus
. 您通常可以省略第二个参数
textStatus
。 The data coming back is understood to be JSON. 回来的数据被理解为JSON。
.getJSON()
is shorthand for a .ajax()
call that specifies JSON data. .getJSON()
是指定JSON数据的.ajax()
调用的简写。
So in your case this would be something like (note that I changed the JSON coming back from the server to response
... it's a less confusing nomenclature in your case than using data
, since you have a data
property in your JSON): 因此,在您的情况下,这将是类似的(请注意,我将JSON从服务器更改为
response
...在您的情况下,这比使用data
,因为您的JSON中有data
属性):
$.getJSON(base_url+'/ajax/get_itema/'+item_id+'/0/3/true', function(response) {
...
});
So, to recover things from response
we simply access them using dot and square bracket notation. 因此,为了从
response
恢复,我们只需使用点和方括号表示法访问它们。 To get the first set of data
: 要获取第一组
data
:
response.data[0].title \\ <== "Yeah Lets Go!"
response.data[0].path \\ <== "http://domain.com/yeah"
The above looks in response
which is our JSON object. 以上是
response
,这是我们的JSON对象。 Then it looks at the first data
elment (there are 3) and pick the title
in the first line and the path
in the second. 然后它查看第一个
data
元素(有3个)并在第一行中选择title
,在第二行中选择path
。
Since you're using jQuery you can use .each()
to iterate over your 3 data
. 由于您使用的是jQuery,因此可以使用
.each()
迭代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 />');
});
.each()
sanely loops over a collection of items. .each()
循环遍历一组项目。 The first argument of .each()
, is the object you want to loop over. .each()
的第一个参数是要循环的对象。 This is response.data
not merely response
. 这是
response.data
而不仅仅是response
。 This is because we want to look at response.data[0]
, response.data[1]
, and response.data[2]
. 这是因为我们要查看
response.data[0]
, response.data[1]
和response.data[2]
。 The second argument of .each()
is the callback function, or what we want to do with each of the items we are iterating over. .each()
的第二个参数是回调函数,或者我们想要对我们迭代的每个项做什么。 Within the callback function, the first argument is automatically the index of the item (0, 1, or 2 in your case). 在回调函数中,第一个参数自动为项的索引(在您的情况下为0,1或2)。 The second argument is the value of the item.
第二个参数是项目的值。 In your case this is a separate object:
response.data[0]
, response.data[1]
, and response.data[2]
respectively. 在您的情况下,这是一个单独的对象:
response.data[0]
, response.data[1]
和response.data[2]
。 We can use dot notation to retrieve the things we want directly from these objects. 我们可以使用点表示法直接从这些对象中检索我们想要的东西。 In the above example we access
.path
. 在上面的例子中,我们访问
.path
。 .title
and .created_formated
from each of the value
s. 每个
value
s的.title
和.created_formated
。
This make your entire 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 append the response to (a) specific element/s. 当然,您可能希望将响应附加到(a)特定元素。
Here's some good info on using .getJSON()
to access multidimensional JSON data from another SO question. 以下是使用
.getJSON()
从另一个SO问题访问多维JSON数据的一些很好的信息 。
Here's some general info about JSON in Javascript . 以下是Javascript中有关JSON的一般信息 。
Note: 注意:
You need commas between your curly braces! 你的花括号之间需要逗号!
You have: 你有:
...p:\/\/domain.com\/yeah"}{"id":"4242","title"...
You need: 你需要:
...p:\/\/domain.com\/yeah"}, {"id":"4242","title"...
Having a div with id result
to get the html, something like: 有一个带有id
result
的div来获取html,例如:
$.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>");
}
});
I don't found in any answers that the data which you posted are NOT valid JSON string . 我在任何答案中都没有发现您发布的数据不是有效的JSON字符串 。 Probably it is your main problem and the reason why
$.get
can not convert the server response to object. 可能这是你的主要问题以及
$.get
无法将服务器响应转换为对象的原因。 The objects inside the data array must be separated with commas . 数据数组中的对象必须用逗号分隔 。 So the data must looks 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 allays verify JSON strings in http://www.jsonlint.com/ . 我建议您在http://www.jsonlint.com/中验证JSON字符串。
Try a templating engine that convert the JSON to HTML on the browser. 尝试在浏览器上将JSON转换为HTML的模板引擎。
You can have a look at pure.js , it is very fast, and keep the HTML totally clean of any Javascript templating logic. 你可以看看pure.js ,它非常快,并且保持HTML完全清除任何Javascript模板逻辑。 We use it to generate all the HTML from JSON data in our web app.(Yep... I'm a main contributor to the lib)
我们使用它从我们的Web应用程序中生成JSON数据中的所有HTML。(是的......我是lib的主要贡献者)
If you are more familiar with the <%...%> or ${...} kind of templates, there are plenty of them and for any taste if you search on the web for javascript template . 如果您更熟悉<%...%>或$ {...}类型的模板,那么如果您在网上搜索javascript模板 ,那么有很多模板可供选择 。
using data from Oleg answer 使用Oleg回答的数据
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 the "data" is an array of object 记住“数据”是一个对象数组
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.