Как сделать, чтобы файл Excel, который был преобразован в JSON, автоматически загружался в таблицу (DataTables) - PullRequest
Новая
       40

Как сделать, чтобы файл Excel, который был преобразован в JSON, автоматически загружался в таблицу (DataTables)

1 голос
/ 13 мая 2019

так что я получил это назначение, мне нужно загрузить CSV-файл на html-страницу, после того, как я его загрузил, мне нужно сделать код, который запускается автоматически - получая имя поля объекта - поместите его в заголовок таблицы и сопоставьтезначение для каждого имени поля объекта.все должно быть автоматически (поскольку наш учитель собирается проверить, просто добавив файл csv - ничто не может быть жестко запрограммировано. Нам также нужно использовать библиотеку под названием Data Tables.

Мне удалось выполнить некоторые задания, но большинство из них жестко запрограммированы, так что это не хорошо.

вот мой HTML - 

  <table id="table_id" class="display">
        <thead>
            <tr id="FieldNames">

            </tr>
        </thead>
        <tbody id="Values">

        </tbody>
    </table>

и в таблицу я добавил этот код - (с жестко закодированным JSON только дляпосмотрим, смогу ли я сделать это, прежде чем импортировать файл CSV) 



const Json = 
            [
{
                "name": "john",
                "age": 35,
                "email": "AF@asdsa.com",
                "address": "Rishon LeZion"
            },
            {
                "name": "hezi",
                "age": 31,
                "email": "wertwree@grf.com",
                "address": "Rishon LeZion"

            },
            {
                "name": "david",
                "age": 23,
                "email": "wertewrt@fd.com",
                "address": "Rishon LeZion"
            },
            {
                "name": "jacky",
                "age": 41,
                "email": "wertr@aa.com",
                "address": "Rishon LeZion"
            }];



        $(document).ready(function () {
            var Obj = Json[0];
            var KeyNames = Object.keys(Obj)
            for (let i = 0; i < KeyNames.length; i++) {
                var Head = $(`<th>${KeyNames[i]}</th>`);
                $("#FieldNames").append(Head);
            }
            for (let j = 0; j < Json.length; j++) {
                var firstVal =  Json[j].name
                var secondVal = Json[j].age
                var thirdVal =  Json[j].email
                var fourthVal = Json[j].address
              var Data = `
              <tr class="middle">
                <td>${firstVal}</td>
                <td>${secondVal}</td>
                <td>${thirdVal}</td>
                <td>${fourthVal}</td>
              </tr>
              `;
              $("#Values").append(Data);
            }

            $('#table_id').DataTable();
        });

, хотя результат хороший, это не то, что я просил сделать. Я пытаюсь выяснить, как заставить его работать автоматически, но этоне работает так хорошо для меня ..

1 Ответ

0 голосов
/ 13 мая 2019

Хорошо, я сделал это некоторое время назад, вот решение:

Я разделил свою логику на две части:

1) Создание заголовков:

Перебираем дочерние объекты (как в объектах в массиве), а затем получаем их ключи с помощью Object.keys() Ключи ваши заголовки. Затем бросьте их в ряд внутри thead и вуаля, ваши заголовки

2) Создайте поля. Это немного сложнее. Цикл по основным объектам, и это даст вам объекты один за другим, когда цикл разворачивается. Затем создайте строку для каждого индекса. Получите значения каждого объекта и убедитесь, что вы выбросили их в правильную строку как td, выполнив что-то, как я сделал id='object-" + childIndex + "'. Затем возьмите эту конкретную строку, и после того, как вы получите Object.values() от вашего объекта, бросьте их один за другим с циклом внутри строки. ТА DA

P.S. Не спрашивайте меня, почему я использовал jquery. Я использовал это, потому что я не мазохист, чтобы делать это с чистым JS 

const json = [{
    "name": "john",
    "age": 35,
    "email": "AF@asdsa.com",
    "address": "Rishon LeZion"
  },
  {
    "name": "hezi",
    "age": 31,
    "email": "wertwree@grf.com",
    "address": "Rishon LeZion"

  },
  {
    "name": "david",
    "age": 23,
    "email": "wertewrt@fd.com",
    "address": "Rishon LeZion"
  },
  {
    "name": "jacky",
    "age": 41,
    "email": "wertr@aa.com",
    "address": "Rishon LeZion"
  }
];

//get headers and create them
const table = $("table");
const thead = $("thead");

var promiseMe = new Promise(function(resolve, reject) {
  //to create the headers first based on the objects
  var createHeaders = json.forEach((childObjects, index) => {
    const kNames = Object.keys(childObjects);

    for (let [index, name] of kNames.entries()) {
      const actualName = name.replace(/\s+/g, '')
      let divId = name.replace(/\s+/g, '-');
      let element = document.getElementById(divId);

      if (!element) {
        thead.append("<td class='header-name' id='" + divId + "'>" + name + "</td>")
      }
    }

    resolve(createHeaders);
  })
}).then(createFields());

function createFields() {
  const keyNames = Object.values(json);

  keyNames.forEach((childObject, childIndex) => {
    //create a row for each object
    const valArray = Object.values(childObject);

    $("#Values").append("<tr id='object-" + childIndex + "' class='rows table-row'></tr>")

    valArray.forEach((value, index) => {
      $("#object-" + childIndex).append("<td class='cell'>" + value + "</td>")
    })

  })
}
.cell, .header-name  {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id" class="display">
  <thead>
  </thead>
  <tbody id="Values">

  </tbody>
</table>
...