Question

我有这种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"}]}

我需要将它解析为javascript对象我相信吗？然后进入html，如：

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

但我不知道如何解析它等等。

我从中得到了这个字符串：

$('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);
});

Answer 1

使用JSON.parse函数将JSON字符串转换为JS对象。大多数现代浏览器都包含JSON.parse，但如果您需要旧浏览器的后备，它也会包含在json2.js中。

Answer 2

由于您使用的是jQuery，请查看.getJSON()

您使用.getJSON()的方式是：

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

url当然是url您从中获取数据。 [ data ]是您向服务器发送的内容。 [ callback(data, textStatus) ]是一个处理data从服务器返回的函数。通常可以省略第二个参数textStatus。回来的数据被理解为JSON。 .getJSON()是指定JSON数据的.ajax()调用的简写。

所以在你的情况下，这将是类似的（请注意，我将JSON从服务器更改为response ...在您的情况下，这比使用data的术语更容易混淆，因为你的JSON中有data属性：

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

因此，要从response恢复内容，我们只需使用点和方括号表示法访问它们。要获得第一组data：

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

以上内容在response中查找，这是我们的JSON对象。然后它会查看第一个data元素（有3个）并在第一行选择title，在第二行选择path。

由于您使用的是jQuery，因此您可以使用 .each() 来迭代3 data。像这样：

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

的 jsFiddle example

.each()在一系列项目上巧妙地循环。 .each()的第一个参数是您要循环的对象。这response.data不仅仅是response。这是因为我们想要查看response.data[0]，response.data[1]和response.data[2]。 .each()的第二个参数是回调函数，或者我们想要对我们迭代的每个项做什么。在回调函数中，第一个参数自动为项的索引（在您的情况下为0,1或2）。第二个参数是项目的值。在您的情况下，这是一个单独的对象：response.data[0]，response.data[1]和response.data[2]。我们可以使用点表示法直接从这些对象中检索我们想要的东西。在上面的示例中，我们访问了.path。每个.title的{{1}}和.created_formated。

这使你的整个功能：

value

当然，您可能希望将响应附加到（a）特定元素。

Here's some good info 使用$.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('Created: ' + value.created_formated + ' '); }); });从另一个SO问题中访问多维JSON数据。

<强> Here's some general info about JSON in Javascript

注意：

你的大括号之间需要逗号！

你有：

.getJSON()

你需要：

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

Answer 3

使用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>");
    }
});

Answer 4

我在任何答案中都没有发现您发布的数据是无效的JSON字符串。可能这是您的主要问题以及$.get无法将服务器响应转换为对象的原因。数据数组中的对象必须用逗号分隔。所以数据必须看起来像

{
    "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" 
        } 
    ]
}

我建议您在http://www.jsonlint.com/中验证JSON字符串。

Answer 5

尝试在浏览器上将JSON转换为HTML的模板引擎。

您可以查看pure.js，它非常快，并且保持HTML完全清除任何Javascript模板逻辑。我们用它来从我们的网络应用程序中生成JSON数据中的所有HTML。（是的......我是lib的主要贡献者）

如果您更熟悉＆lt;％...％＆gt;或$ {...}种模板，如果你search on the web for javascript template，有很多模板和任何品味。

Answer 6

使用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>');
}

记住“数据”是一个对象数组

如何将json字符串解析为javascript对象

6 个答案:

的 jsFiddle example