How to create page section based on JSON

How to create page section based on JSON

I have jQuery slider code that I want to populate via a JSON url. Below is a sample JSON I am starting with:

{    "Context": null,    "IsGeneric": false,    "Items": [      {        "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....read more",        "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....read more",        "MediaUrl": "\/images\/image2.jpg",        "AlternativeText": "20 Beautiful Long Exposure Photographs",        "Height": 1050,        "ThumbnailUrl": "\/images\/image2-thb.jpg",        "Width": 1680      },      {        "Description": "Liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....read more",        "MediaUrl": "\/images\/image3.jpg",        "AlternativeText": "35 Amazing Logo Designs",        "Height": 1050,        "ThumbnailUrl": "\/images\/image3-thb.jpg",        "Width": 1680      },      {        "Description": "Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....read more",        "MediaUrl": "\/images\/image4.jpg",        "AlternativeText": "Create a Vintage Photograph in Photoshop",        "Height": 1050,        "ThumbnailUrl": "\/images\/image4-thb.jpg",        "Width": 1680      }    ]  }  

How do I transform it to this?:

    
        
          
15+ Excellent High Speed Photographs
          
20 Beautiful Long Exposure Photographs
          
35 Amazing Logo Designs
          
Create a Vintage Photograph in Photoshop
        
              
                     
              
15+ Excellent High Speed Photographs
              
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....read more
           
      
              
                     
              
20 Beautiful Long Exposure Photographs
              
Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....read more
           
      
              
                     
              
35 Amazing Logo Designs
              
liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....read more
           
      
              
                     
              
Create a Vintage Photograph in Photoshop
              
Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....read more
           
      
    
  

Answer by Diodeus for How to create page section based on JSON

Start with a dummy element in memory. This whole thing will be 100x faster if you build the HTML in memory and insert it into the DOM all in one go, rather than repeated DOM writes.

var myOutput = document.createElement('div')  

Then you loop through your data and append content into "myOutput" until you're done.

$(myOutput).append(....)  

See: http://api.jquery.com/append/

Then append it into the page:

$('body').append(myOutput)  

Answer by Martijn for How to create page section based on JSON

You should check out this question and its answers.

If it doesn?t work for you, try googling for "Javascript templates".

Answer by Daff for How to create page section based on JSON

You might want to look at a client side templating mechanism e.g. jQuery.tmpl or Embedded JavaScript. The tab part of your example in EJS would look like this:

<% $.each(Items, function(index, item) { %>      
                     
              
<%= item.AlternativeText %>
              
<%= item.Description %>
           
      
  <% } %>  

Answer by mplungjan for How to create page section based on JSON

Plain JS:

condimentum lacus. Pellentesque ut diam....read more", "MediaUrl": "\/images\/image1.jpg", "AlternativeText": "15+ Excellent High Speed Photographs", "Height": 1050, "ThumbnailUrl": "\/images\/image1-thb.jpg", "Width": 1680 }, . . . ] } window.onload=function() { var container = document.getElementById("featured"); for (var i=0, n=res.Items.length;i

• 15+ Excellent High Speed Photographs
• 20 Beautiful Long Exposure Photographs
• 35 Amazing Logo Designs
• Create a Vintage Photograph in Photoshop

Answer by Aleadam for How to create page section based on JSON

I gave it a shot for the divs part. I wrote it on top of my head so it may contain typos etc., but can give you an idea

for (var i=0; i< jsonDesc.length; i++) {    $("
").attr("id", "fragment-"+(i+1))        .addClass("ui-tabs-panel")        .append$("").attr("src", jsonDesc[i].Items.MediaUrl)        .append(            $("
").addClass("info").append(                $("
")                    .append("").attr("href", "#").html(jsonDesc[i].Items.AlternativeText)              )          );    if (i>0) {      $("#fragment-"+(i+1)).addClass ("ui-tabs-hide");  }  

Answer by James Kyburz for How to create page section based on JSON

Checkout jqote2 which depends on jQuery or underscore's _template method.

http://aefxx.com/jquery-plugins/jqote2/
http://documentcloud.github.com/underscore/

your json example needs to have href escaped with \"

example using underscore

var x = _.template("hello world a is <%= a %>, <% for (var i=0; i < 4; i++) { %> <%= i %>     <% } %>", {a: 77});  

x ; //# => hello world a is 77, 0 1 2 3

Answer by Jonny Buchanan for How to create page section based on JSON

With DOMBuilder, you could do something like this:

http://jsfiddle.net/insin/kJVBS/1/

DIV({id: "featured"},    UL({"class": "ui-tabs-nav"},      LI.map({"class": "ui-tabs-nav-item"}, items, function(item, attrs, idx) {        attrs["id"] = "nav-fragment-" + (idx + 1);        if (idx === 0) {          attrs["class"] += " ui-tabs-selected";        }        return A({href: "#fragment-" + (idx + 1)},          IMG({src: item.ThumbnailUrl, alt: ""}),          SPAN(item.AlternativeText)        );      })    ),    DOMBuilder.fragment.map(items, function(item, idx) {      return DIV({id: "fragment-" + (idx + 1), "class": "ui-tabs-panel"},        IMG({src: item.MediaUrl, alt: ""}),        DIV({"class": "info"},          H2(A({"href": "#"}, item.AlternativeText)),          P({innerHTML: item.Description})        )      );    })  )  

You'll also be able to use this exact same code to build the corresponding HTML for insertion with innerHTML (including registration of any event handlers you define) if the DOM approach starts to become noticeably slow.

Answer by Stony for How to create page section based on JSON

I would use the new (still in beta) jQuery tmpl plugin from Microsoft. It's much more concise than manually building the DOM elements yourself.

A full implementation example for your question is here.

http://jsbin.com/afoko5/latest

This generates the html you want, but it doesn't look very good because of the missing images and css classes.

Hope this helps.

Answer by Sprintstar for How to create page section based on JSON

jQuery Templates is perfect for this kind of thing.

Answer by subham.saha1004 for How to create page section based on JSON

Check out this fiddle I created with your sample data: http://jsfiddle.net/subhamsaha1004/ct3sw/

It has a basic templating feature included that makes it easier to create the html. It uses pure javascript. The code has been kept very simple as the purpose was only to create a demo which you can further build upon.

The parser code looks something like this:

var Parser = {      template: '
{{title}}
{{description}}
',      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;      }  };  

Check the fiddle for the entire code.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72