JSON Parsing

Parsing the json structure to build a html for a slider

by Subham Saha

HTML

<div id="result"></div>

JavaScript

var response = {
  Context: null,
  IsGeneric: false,
  Items: [{
      Description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a>',
      MediaUrl: '/images/image1.jpg',
      AlternativeText: '15+ Excellent High Speed Photographs',
      Height: 1050,
      ThumbnailUrl: '/images/image1-thb.jpg',
      Width: 1680
    }, {
      Description: 'Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a>',
      MediaUrl: '/images/image2.jpg',
      AlternativeText: '20 Beautiful Long Exposure Photographs',
      Height: 1050,
      ThumbnailUrl: '/images/image1-thb.jpg',
      Width: 1680
    }
  ]
};

var Parser = {
    template: '<div class="slide"><img src="{{imgsrc}}" alt="" /><div class="info" ><h2><a href="#" >{{title}}</a></h2><p>{{description}}</p></div></div>',
    compile: function(template, data) {
        template = template.replace(/\{\{imgsrc\}\}/g, data.MediaUrl).replace(/\{\{title\}\}/g, data.AlternativeText).replace(/\{\{description\}\}/g, data.Description);
        
        return template;
    },
    parse: function(response) {
        var tpl = '', i = 0, len = 0, html = '';
        for(i = 0, len = response.length; i < len; i++) {
            tpl = this.template;
            html += this.compile(tpl, response[i]);
        }
        
        return html;
    }
};

document.getElementById('result').innerHTML = Parser.parse(response.Items);