Question 226451 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to Generate Row & Columns with load data by JQuery?

I want to generate row and column repeatably with data by jquery each function. Please help.

Required HTML Structure and jquery attempt:

var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {

  var name = document.querySelector(".name");
  var surname = document.querySelector(".surname");
  $.each(data, function(index, value) {
    var $name = value.name;
    var $surname = value.surname;
    var $rollnum = value.rollnum;
    console.log($name);
    console.log($surname);
    console.log($name);
    $(".name").text($name);
    $(".surname").text($surname);
    $(".rollnum").text($rollnum);

  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.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>

https://jsfiddle.net/anoopsuda/3a6ucg4d/3/

Tags:

2

Answers


  1. 0

    You need to use .append() for this and need to change HTML structure a bit near surname and rollnumber (put them in separate div as per my suggestion)

    var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {
  $.each(data, function(index, value) {
    $('.eventsBlock').append(`<div class="row">
    <div class="col-md-4 col-sm-4">
      <span class="name">name: ` + value.name + `</span>
    </div>
    <div class="col-md-4 col-sm-4">
      <span class="surname">surname: ` + value.surname + `</span>
    </div>
    <div class="col-md-4 col-sm-4">
      <span class="rollnum">rollnum: ` + value.rollnum + `</span>
    </div>
    <div class="col-md-4 col-sm-4">
      <span class="locaton">locaton: N/A</span>
    </div>
  </div><br>`);

  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="eventsBlock">
</div>

    It would be much better if you use table HTML like this:

    var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {
  $.each(data, function(index, value) {
    $('.eventsBlock tbody').append(`<tr>
    <td>` + value.name + `</td>
    <td>` + value.surname + `</td>
    <td>` + value.rollnum + `</td>
    <td>N/A</td>
    </tr>`);
  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<table class="eventsBlock">
  <thead>
    <tr>
      <th>name</th>
      <th>surname</th>
      <th>rollnum</th>
      <th>locaton</th>
      <tr>
  </thead>
  <tbody>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    This works if you’re using jQuery.

    var data = [
  {

     "name":"Alice",
     "surname":"Smith",
     "rollnum":"00002",
     "locaton":"Mumbai"
  },
  {
    "name":"Bob",
     "surname":"Walter",
     "rollnum":"00004",
     "locaton":"Delhi"
  }
];
     
     
     
function load(){
  let allRows = ''
  $.each(data, function (index, value) {         
   var $name = value.name;
   var $surname = value.surname;
   var $rollnum = value.rollnum;
   var $locaton = value.locaton;
   let rowView = `<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>`
   allRows += rowView

  });
  $('.eventsRows').html(allRows)
}
load();
    <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>
<div class="eventsRows">
  <!--Content will go here-->        
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search