Блог

Главная - Вопросы по программированию - Создание html-таблицы с использованием вложенного файла JSON

Создание html-таблицы с использованием вложенного файла JSON

#jquery #json

#jquery #json

Вопрос:

У меня есть файл JSON с именем info.json , в котором есть личная информация о 20 студентах, и я хочу преобразовать его в HTML таблицу.

Это всего лишь пример (информация только 1).Это касается 20 студентов.Это только заголовки таблиц HTML.Вот как я хочу, чтобы макет моей таблицы. Я не смог привести здесь то, что я пытался, из-за какой-то ошибки. Это то, что я пробовал.

 [{
  "student_name": "Shastri Mahesh",
  "date_of_birth": "03-02-2002",
  "parents": [{
    "father_name": "Shidharth Mahesh",
    "mother_name": "Suhana"
  }],
  "blood_group": "AB-",
  "email": "shastri.mahesh@outlook.com",
  "phone": [{
    "landline": 9812343541,
    "mobile": 908252123
  }],
  "address": [{
    "door_no": "3A",
    "street_name": "Shastri nagar",
    "place_name": "Delhi",
    "pin_code": 142342,
    "country": "India"
  }],
  "degree": [{
    "ug": true,
    "pg": true,
    "others": "PhD(English Hons.)"
  }]
}]

$(document).ready(function() {

  // FETCHING DATA FROM JSON FILE 
  $.getJSON("info.json", function(data) {
    var student = '';

    // ITERATING THROUGH OBJECTS 
    $.each(data, function(key, value) {

      //CONSTRUCTION OF ROWS HAVING 
      // DATA FROM JSON OBJECT 
      student  = '<tr>';
      student  = '<td>'   value.student_name   '</td>';

      student  = '<td>'   value.date_of_birth   '</td>';

      student  = '<td>'   value.parents.father_name   '</td>';

      student  = '<td>'   value.parents.mother_name   '</td>';

      student  = '<td>'   value.blood_group   '</td>';

      student  = '<td>'   value.email   ','   '<br>'   value.phone.landline   ','   value.phone.mobile   '</td>';

      student  = '<td>'   value.address.door_no   ','   value.address.street_name   ','   value.address.place_name   ', <br>'   value.address.country   '-'   value.address.pin_code   '</td>';

      student  = '<td>'   value.degree.ug   '</td>';

      student  = '<td>'   value.degree.pg   '</td>';

      student  = '<td>'   value.degree.others   '</td>';

      student  = '</tr>';
    });

    //INSERTING ROWS INTO TABLE  
    $('#table').append(student);
  });
});

Комментарии:

1. Первым шагом является чтение этого файла в переменную javascript. Вы смогли это сделать? Также не могли бы вы более конкретно рассказать о том, что вы пробовали и в чем была проблема (даже на простом английском языке)?

2. Являются ли данные для всех учащихся в том же формате, что и этот?

3. Зачем так много вложенных массивов, если каждый из них содержит только один объект? Необычная структура

4. «Я не смог привести здесь то, что я пытался, из-за какой-то ошибки». Но именно так работает этот сайт. Вы показываете, что вы пробовали, а другие помогают улучшить это. Это не бесплатный сервис для написания кода. Покажите нам код, который вы пробовали

5. Да, формат одинаков для всех студентов

Ответ №1:

Проблема с вашим текущим кодом заключается в том, что вы вообще не используете данные вложенного массива в своей $.each функции. У вас есть вложенный массив, подобный degree и parent's name

Поэтому вам нужно либо перебирать их, либо просто обращаться к data ним напрямую, поскольку данные structure всегда одинаковы. Кроме того, вам нужно упростить results свой массив, используя .html и создавая td's для каждого row , который у вас есть.

Вам нужна таблица heading , которая у вас есть shown на этом рисунке, но вы вообще не добавляете никаких заголовков в свои собственные code .

Наконец, вам также нужно CSS убедиться, что таблица выглядит красиво и в порядке — я исправил все ваши code и другие фиктивные данные, чтобы показать, что все они работают сейчас. Запустите фрагмент ниже.

Полная рабочая демонстрация:

 var data = [{
  "student_name": "Always Helping",
  "date_of_birth": "03-02-2002",
  "parents": [{
    "father_name": "Foo",
    "mother_name": "Bar"
  }],
  "blood_group": "Always B  ",
  "email": "foo@google.com.au",
  "phone": [{
    "landline": 9812343541,
    "mobile": 908252123
  }],
  "address": [{
    "door_no": "3A",
    "street_name": "Shastri nagar",
    "place_name": "Melbourne",
    "pin_code": 85000,
    "country": "Australia"
  }],
  "degree": [{
    "ug": true,
    "pg": true,
    "others": "PhD(IT Hons.)"
  }]
}, {
  "student_name": "Shastri Mahesh",
  "date_of_birth": "03-02-2002",
  "parents": [{
    "father_name": "Shidharth Mahesh",
    "mother_name": "Suhana"
  }],
  "blood_group": "AB-",
  "email": "shastri.mahesh@outlook.com",
  "phone": [{
    "landline": 9812343541,
    "mobile": 908252123
  }],
  "address": [{
    "door_no": "3A",
    "street_name": "Shastri nagar",
    "place_name": "Delhi",
    "pin_code": 142342,
    "country": "India"
  }],
  "degree": [{
    "ug": true,
    "pg": true,
    "others": "PhD(English Hons.)"
  }]
}]

let table = $('#table') //table variable

//Create table heading
table.append("<thead><td>Name</td><td>DOB</td><td>Father's Name</td><td>Mother's Name</td><td>Blood Group</td><td>Contact</td><td>Address</td><td>UG</td><td>PG</td><td>Others</thead></th>");

//Loop through the data
$.each(data, function(index, x) {
  let row = $('<tr>');
  row.append($('<td>').html(x.student_name));
  row.append($('<td>').html(x.date_of_birth));
  //Mother / father
  row.append($('<td>').html(x.parents[0].father_name));
  row.append($('<td>').html(x.parents[0].mother_name));
  row.append($('<td>').html(x.blood_group));
  //get landline [0] or mobile [1]
  row.append($('<td>').html(x.phone[0].landline));
  //Address
  $.each(x.address, function(index, o) {
    row.append($('<td>').html(o.door_no   ', '   o.street_name  
      ', '   o.place_name   ', '   o.pin_code));
  })
  //Degree
  row.append($('<td>').html(x.degree[0].ug));
  row.append($('<td>').html(x.degree[0].pg));
  row.append($('<td>').html(x.degree[0].others));
  table.append(row) //append all data
})  
 th,
td {
  border-collapse: collapse;
  padding: 0.5em;
}

thead {
  font-weight: bold;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="table"></table>

Ответ №2:

Попробуйте использовать Datatable вы можете обратиться к этому примеру: данные вложенных объектов (массивы)