Mustache.js : Parsing json

Question

I am pulling JSON like below from api

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

And I'm new with mustache. The data I want to parse is not an array of objects, it is an object with array values.

So far I got this but nothing is outputting. I also want extract img url from the value. I am using the recent version of Mustache.js 2.1.2

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

I would like the OUTPUT be: <img src="http://mywebsite.com/news/images/2015/06/image.jpg">

Answer 1

You are trying to use logic in your template engine. Mustache is designed to not allow that kind of behavior.

Furthermore image_01 is a value of basename and not a property. You can not reach values with dot notation i.e. obj.property.

Best solution is to process json further by server or client side before passing it to mustache.

Answer 2

let's say you have got your request from an $.ajax session. with .done(function(data}{ .... })

the code should be something like this if it is properly parsed. So far I saw at sight that the JSON is not being formatted properly

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

Usually when you have a key=>value chain, the "key" and the "value" should be quoted:

{ "myval":"true"}

in your case , value is not being formatted properly:

• "value" must be quoted as standard
• HTML for "value" is not properly formatted for JSON. You cannot EVER include html without escape quotes. You have two options to format properly the content of "value": 1) urlencode the HTML in your database, so when it returns to you in JSON Format, it won't mess up your string, or 2) use escape quotes in your html, so it wont give you errors. the outcome should look like this:

using URLEncode on your html

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

Using escape quote on your html 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>"
        },

Now, given that, your can either url_decode the value to later on evaluate as a DOM object and extract the url of the image, or use the html from the part of escaped quotes... at this point the process is very similar. you have to create an invisible object and extract the data: here is how you get your url if you want it as result of an $.ajax request:

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

with that, you must get the value of your image with no problem in your template.