Dynamically creating divs using Jquery with JSON data

Question

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

Haze · Accepted Answer · 2017-06-06 02:27:01Z

1

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

        })
    }
});

answered Jun 6, 2017 at 2:27

Haze

1967 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nurul98 Over a year ago

Hi Haze, sorry I did not ask this 2 days ago but would you mind explaining what is 'list' for?

Haze Over a year ago

Sorry for the late reply. list is the data (the JSON file) you've sent to ajax

Mark · Accepted Answer · 2017-06-06 02:14:06Z

1

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/

answered Jun 6, 2017 at 2:14

Mark

2,0433 gold badges22 silver badges43 bronze badges

2 Comments

nurul98 Over a year ago

Thank you for your speedy reply. This is exactly what I was looking for, however, is it possible to keep the JSON file separated from the other codes, so that the JSON file would be a standalone file?

Mark Over a year ago

@nurul98 yes, you can read you JSON file in your server. Then, you will send that file to your clients (by GET method or whatever method that your software can use)

Collectives™ on Stack Overflow

Dynamically creating divs using Jquery with JSON data

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related