Mustache.js：解析 json答案

【问题标题】：Mustache.js : Parsing jsonMustache.js：解析 json
【发布时间】：2015-06-25 11:37:25
【问题描述】：

我从 api 中提取 JSON 如下所示

{  
   "totalResults":1,
   "items":[  
      {  
         "body":"here is the body",
         "excerpt":"here is the exceprt",
         "title":"article title",
         "customFields":[  
            {  
               "basename":"image_title",
               "value":""
            },
            {  
               "basename":"image_tag",
               "value":""
            },
            {  
               "basename":"image_text",
               "value":""
            },
            {  
               "basename":"image_01",
               value: "<form mt:asset-id="428270" class="enclosure enclosure-image" style="display: inline;"><a href="http://mywebsite.com/news/images/2015/06/image.jpg">image.jpg</a></form>"
            },
            {  
               "basename":"image_01_cap",
               "value":"some text for the captions"
            }
         ]
      }
   ]
}

我是新来的小胡子。我要解析的数据不是对象数组，而是具有数组值的对象。

到目前为止，我得到了这个，但没有任何输出。我还想从值中提取 img url。我正在使用最新版本的 Mustache.js 2.1.2

{{#items}}
    {{#customFields}}
        {{#basename.image_01}}
                <img src="{{value}}">
         {{/basename.image_01}} 
    {{/customFields}}
{{/items}}

我希望输出为：<img src="http://mywebsite.com/news/images/2015/06/image.jpg">

【问题讨论】：

你不是忽略项目吗？比如{{#items}}{{/items}}
@Skarlinski 谢谢该项目在我的原始代码中，但我有些遗漏了它。

标签： javascript json parsing templates mustache

【解决方案1】：

您正在尝试在模板引擎中使用逻辑。 Mustache 旨在不允许这种行为。

此外，image_01 是 basename 的值，而不是属性。您无法使用点表示法达到值，即 obj.property。

最好的解决方案是在将 json 传递给 mustache 之前，由服务器或客户端进一步处理 json。

【讨论】：

【解决方案2】：

假设您收到了来自 $.ajax 会话的请求。与.done（功能（数据}{ …… })

如果正确解析，代码应该是这样的。到目前为止，我看到 JSON 格式不正确

        {  
           "basename":"image_01",
           value: "<form mt:asset-id="428270" class="enclosure enclosure-image" style="display: inline;"><a href="http://mywebsite.com/news/images/2015/06/image.jpg">image.jpg</a></form>"
        },

通常当你有一个key=>价值链时，应该引用“key”和“value”：

{ "myval":"true"}

在您的情况下，值的格式不正确：

“值”必须作为标准引用
“值”的 HTML 格式不适合 JSON。你不能在没有转义引号的情况下包含 html。您有两个选项可以正确格式化“值”的内容：1) 对数据库中的 HTML 进行 urlencode，因此当它以 JSON 格式返回给您时，它不会弄乱您的字符串，或者 2) 在您的数据库中使用转义引号html，所以它不会给你错误。结果应如下所示：

在您的 html 上使用 URLEncode

        {  
           "basename":"image_01",
           "value": "%3Cform+mt%3Aasset-id%3D%22428270%22+class%3D%22enclosure+enclosure-image%22+style%3D%22display%3A+inline%3B%22%3E%3Ca+href%3D%22http%3A%2F%2Fmywebsite.com%2Fnews%2Fimages%2F2015%2F06%2Fimage.jpg%22%3Eimage.jpg%3C%2Fa%3E%3C%2Fform%3E"
        },

在您的 html 值上使用转义引号：

        {  
           "basename":"image_01",
           "value": "<form mt:asset-id=\"428270\" class=\"enclosure enclosure-image\" style=\"display: inline;\"><a href=\"http://mywebsite.com/news/images/2015/06/image.jpg\">image.jpg</a></form>"
        },

现在，鉴于此，您可以对值进行 url_decode 以便稍后评估为 DOM 对象并提取图像的 url，或者使用转义引号部分中的 html...此时过程非常相似的。你必须创建一个不可见的对象并提取数据：如果你想要它作为 $.ajax 请求的结果，这是你获取 url 的方法：

.done(function(data){
    var myhtml = data.items[0].customFields[3].value;
    $("<div id='myfakecontainer'></div>").appendTo("body");
    $("#myfakecontainer").hide();
    $(myhtml).appendTo("#myfakecontainer");
    var mylink = $("#myfakecontainer").find("a");
    console.log($(mylink).attr("href"));
    $("#myfakecontainer").remove();
 }

这样，您必须在模板中毫无问题地获得图像的价值。

【讨论】：