Create Row & Column & load Data Loop

by anoopsuda

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="eventsBlock">
        <div class="row">
        <div class="col-md-4 col-sm-4">
        <span class="name">name</span>
        </div>
        <div class="col-md-4 col-sm-4">
        <span class="surname">surname</span>
        <span class="rollnum">rollnum</span>
        </div> 
        <div class="col-md-4 col-sm-4">
            <span class="locaton">locaton</span>            
            </div> 
        </div>
        </div>

CSS

.row {
  
  background-color:#fff;
 
}
 .col-md-4 {border: solid 1px #ccc;}

JavaScript

var data = [
        {

           "name":"Alice",
           "surname":"Smith",
           "rollnum":"00002",
           "locaton":"Mumbai"
        },
        {
          "name":"Bob",
           "surname":"Walter",
           "rollnum":"00004",
           "locaton":"Delhi"
        }
     ];
     
     load();
     
     function load(){
      
         $.each(data, function (index, value) {    	 
           var $name = value.name;
           var $surname = value.surname;
           var $rollnum = value.rollnum;
           var $locaton = value.locaton;
            console.log($name);
           console.log($surname);
           console.log($name);
           comsole,log($locaton);
           $(".name").text($name);
           $(".surname").text($surname);
           $(".rollnum").text($rollnum);
           $(".locaton").text($locaton);
           
         });
     }