修改 JSON 格式以使用 JavaScript 模板库答案

【问题标题】：Modify JSON fomat to work with JavaScript template library修改 JSON 格式以使用 JavaScript 模板库
【发布时间】：2016-01-15 02:10:31
【问题描述】：

我正在尝试获取存储为 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 templateString 中的模板解析来自 var jsonData 的 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"
    }
};

【问题讨论】：

parse the JSON data from var jsonData - 不管你叫什么变量，var jsonData 不需要解析，因为它不是 JSON 数据
@JaromandaX 所以也许在我的 PHP JSON 生成方面我需要考虑更改生成此数据的格式？当我通过 JSON 验证器运行它时，它显示它是正确的吗？
不，只是说你不需要 JSON.parse 不是 JSON 的数据
@JaromandaX 我明白了，我所说的解析只是将 JSON 数据处理到模板中。不知道如何使用这个现有的 JSON

标签： javascript json templates mustache

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

     output.append(html);
});

请查看更新后的jsfiddle.

【讨论】：

您对此有何反馈。谢谢