CODEWITHSUNDEEP
jqueryhtmljson
nurul98
nurul98

Reputation: 117

Dynamically creating divs using Jquery with JSON data

so basically what I am trying to do is I have a bunch of data in an external JSON file. This JSON file can be edited by authorised people at any time so the number of data will keep on changing. Therefore, using the data in that file, I need to dynamically create divs so that the number of divs that I have will match the amount of data there is in the JSON file. And in the divs, the JSON data will be shown. I've done my research and I found out that it could be done through Jquery and Ajax but I did not manage to find something that was similar to my situation. Pardon me because I am quite a newbie when it comes to web development

This is how the divs are if it was hard-coded.

<div class="container" id="TestCi">
<h3>Files</h3>
<div class="row">
  <div class="col-md-102 col-sm-12">

    <div class="col-md-4 col-sm-4">
      <div class="well">
        <h5>3G</h5>
         <a href="https://example.com" target="_blank"><img data-toggle="tooltip" data-placement="left" title="Click to open data" src="images/3GQoS.jpg" height="100%" width="100%"/> </a>
      </div>
    </div>

    <div class="col-md-4 col-sm-4">
      <div class="well">
        <h5>4G</h5>
        <a href="https://example.com" target="_blank"><img data-toggle="tooltip" data-placement="left" title="Click to open data" src="images/4GQoS.jpg" height="100%" width="100%"/></a>            
      </div>
    </div>

  <div class="col-md-4 col-sm-4">
    <div class="well">
      <h5>Lorem Ipsum</h5>
      <p>Integer eget tortor justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Ut enim ad minim veniam, quis nostrud exercitation.</p>
    </div>
  </div>

And this is my JSON file

[{"title":"3G","filePath":"https://example.com","imagePath":"images/3GQoS.jpg"}, {"title":"4G", "filePath":"https://example.com", "imagePath":"images/4GQoS.jpg"} ]

Edit: I need to read each item in the external JSON file and with each item, a div will be created and the data will be displayed in it. Here is an image of how the divs look like: Image

Upvotes: 0

Views: 3086

Answers (2)

Haze
Haze

Reputation: 196

You can try this.

$.ajax({
    url : "url",
    type : "GET or POST", // whichever you like
    contentType:"application/json",
    success : function(list)
    {           
        var divCol  = "<div class='col-sm-4 col-md-4'>";
        var divWell = "<div class='well'>";
        var divClose= "</div>";

        list.forEach(function(obj, index) {

            var title     = "<h5>"      + obj.title    + "</h5>";
            var linkStart = "<a href='" + obj.filePath + "' target='_blank'>";
            var image     = "<img data-toggle='tooltip' data-placement='left' title='Click to open data' src='" + obj.imagePath + "' height='100%' width='100%'/>"
            var linkEnd   = "</a>";

            var div = divCol    +
                        divWell     +
                            title       +
                            linkStart       +
                            image       +
                            linkEnd +
                        divClose +
                      divClose;

            $('.col-sm-12').append(div); // insert the div you've just created

        })
    }
});

Upvotes: 1

Mark
Mark

Reputation: 2063

you need to deserialize your JSON File first. after that, you loop through that each obj, and build divs. Then, you just .prepend() it into your target div

var JsonData = '[{"title":"3G","filePath":"https://example.com","imagePath":"images/3GQoS.jpg"}, {"title":"4G", "filePath":"https://example.com", "imagePath":"images/4GQoS.jpg"} ]';

var obj = JSON.parse( JsonData );

var tmp = '';
$.each( obj, function( key, value ) {
  tmp += '<div class="col-md-4 col-sm-4">';
  tmp += '    <div class="well">';
  tmp += '      <h5>' + value.title + '</h5>';
  tmp += '      <a href="' + value.filePath + '" target="_blank"><img data-toggle="tooltip" data-placement="left" title="Click to open data" src="' + value.imagePath + '" height="100%" width="100%"/></a>    ';        
  tmp += '    </div>';
  tmp += '  </div>';
});

$('#main').prepend(tmp);

demo : https://jsfiddle.net/vd2jaxtr/

Upvotes: 1

Related Questions