Question

我正在尝试将用户列表存储为JSON并使用它来使用JavaScript解析模板。

使用库Mustache，就可以这样做......

var output = $("#output"); 

// template stored in JS var as a string
var templateString = '<div>'+
'<ul>'+
'  <li>{{first_name}} {{last_name}} goes by the username of: {{user_name}}</li>'+
'</ul>'+
'</div>';

// parse template stored in JS string var
var html = Mustache.render(templateString, jsonData);
output.append(html);

在上面的示例中，它将使用var jsonData中标记的模板解析来自var templateString的JSON数据

我遇到的问题是我的JSON数据格式不正是Mustache模板所需的格式。

而不是这种格式...

var jsonData = { 
    "1":{  
        "id":"1",
        "user_name":"jasondavis",
        "first_name":"Jason",
        "last_name":"Davis",
        "is_admin":"1",
        "gravatar_id":"http:\/\/www.gravatar.com\/avatar\/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG",
        "gravatar_url":"http:\/\/www.gravatar.com\/avatar\/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG"
    },
    "1702c3d0-df12-2d1b-d964-521becb5e3ad":{  
        "id":"1702c3d0-df12-2d1b-d964-521becb5e3ad",
        "user_name":"Jeff",
        "first_name":"Jeff",
        "last_name":"Mosley",
        "is_admin":"1",
        "gravatar_id":"http:\/\/www.gravatar.com\/avatar\/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG",
        "gravatar_url":"http:\/\/www.gravatar.com\/avatar\/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG"
    }
};

Mustache期望这种JSON格式......

var jsonData2 = { 
"users":[
{  
    "id":"1",
    "user_name":"jasondavis",
    "first_name":"Jason",
    "last_name":"Davis",
    "is_admin":"1",
    "gravatar_id":"http:\/\/www.gravatar.com\/avatar\/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG",
    "gravatar_url":"http:\/\/www.gravatar.com\/avatar\/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG"
},
{  
    "id":"1702c3d0-df12-2d1b-d964-521becb5e3ad",
    "user_name":"Jeff",
    "first_name":"Jeff",
    "last_name":"Mosley",
    "is_admin":"1",
    "gravatar_id":"http:\/\/www.gravatar.com\/avatar\/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG",
    "gravatar_url":"http:\/\/www.gravatar.com\/avatar\/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG"
}
]};

以及此模板...注意添加{{#users}}和{{/users}}并<li>标记

// template stored in JS var as a string
var templateString = '<div>'+
'<ul>'+
'{{#users}}'+
'  <li>{{first_name}} {{last_name}} goes by the username of: {{user_name}}</li>'+
'{{/users}}'+
'</ul>'+
'</div>';

由于我的JSON数据已经在下面以这种格式出现...有没有办法让它可以使用模板，或者一旦我得到它就必须更改JSON？

任何帮助表示感谢。

这里的JSFIddle演示：http://jsfiddle.net/utgrLw96/25/

var jsonData = { 
    "1":{  
        "id":"1",
        "user_name":"jasondavis",
        "first_name":"Jason",
        "last_name":"Davis",
        "is_admin":"1",
        "gravatar_id":"http:\/\/www.gravatar.com\/avatar\/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG",
        "gravatar_url":"http:\/\/www.gravatar.com\/avatar\/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG"
    },
    "1702c3d0-df12-2d1b-d964-521becb5e3ad":{  
        "id":"1702c3d0-df12-2d1b-d964-521becb5e3ad",
        "user_name":"Jeff",
        "first_name":"Jeff",
        "last_name":"Mosley",
        "is_admin":"1",
        "gravatar_id":"http:\/\/www.gravatar.com\/avatar\/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG",
        "gravatar_url":"http:\/\/www.gravatar.com\/avatar\/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG"
    }
};

Answer 1

正如评论中已经指出的那样，您的jsonData不是JSON，而是javascript对象。您可以使用jQuery轻松修改它（因为您已经在使用它）。

var usersArray = $.map(jsonData, function(value, index) {
    return [value];
});
var mustacheData = {users: usersArray};

但这对你来说还不够。您的模板适用于用户列表，但现在它告诉Mustache它只是一个用户。您的模板应如下所示：

var templateString = "
  <div><ul>
    {{#users}}
    <li>{{first_name}}{{last_name}} goes by the username of:{{user_name}}</li>
    {{/users}}
  <div><ul>
";

（我知道你已经提出来了，但现在它适用于新数据，所以我在答案中加了这个。）

更正了fiddle

Answer 2

我使用jsonData函数循环使用jQuery.each，我认为这足以创建您的预期结果：

$.each(jsonData, function(key,val) {

     var html = Mustache.to_html(templateString, val);

     output.append(html);
});

请查看更新后的jsfiddle.

修改JSON fomat以使用JavaScript模板库

2 个答案: