Блог

Главная - Вопросы по программированию - Данные JSON в несколько html-таблиц с использованием JS

Данные JSON в несколько html-таблиц с использованием JS

#javascript #html #json

#javascript #HTML #json

Вопрос:

У меня есть данные в формате JSON для нескольких таблиц на моем веб-сайте. КАЖДАЯ ТАБЛИЦА ИМЕЕТ ОДИНАКОВОЕ КОЛИЧЕСТВО СТОЛБЦОВ (2 колонки).Я пытаюсь минимизировать функцию в javascript, которая отображает таблицу с текущими данными JSON. Должен ли я создавать каждую таблицу в html или одной должно быть достаточно и для функции? Как взять данные JSON и создать для них отдельную таблицу?

Вот код
https://codepen.io/S4UCY/pen/wvGgzmZ

 var firstTable = [
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablabla',
    }
]

var secondTable = [
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  }
]

/*
 1. Loop Through Array amp; Access each value
 2. Create Table Rows amp; append to table
*/


for (var i in firstTable){
var row = `<tr>
              <td>${firstTable[i].code}</td>
              <td>${firstTable[i].result}</td>
            `
var table = $('#table-body')
table.append(row)
}  
 #title{
  color:#fff;
  font-weight:100;
  font-size:28px;
  padding:10px;
  border:1px solid #fff;
  background-color: #55608f;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: linear-gradient(45deg, #bada55, #5f2c82);
    font-family: sans-serif;
    font-weight: 100;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

table {
    width: 500px;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

th,
td {
    padding: 15px;
    background-color: rgba(255,255,255,0.2);
    color: #fff;
}

th {
    text-align: left;
}

thead {
    th {
        background-color: #bada55;
    }
}

tbody {
    tr {
        amp;:hover {
            background-color: rgba(255,255,255,0.3);
        }
    }
    td {
        position: relative;
        amp;:hover {
            amp;:before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: -9999px;
                bottom: -9999px;
                background-color: rgba(255,255,255,0.2);
                z-index: -1;
            }
        }
    }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
      <h1 id="title">List of codes</h1>
   <!-- Table structure here -->
   <table id="our-table">
     <thead>
       <tr>
         <th>Code</th>
         <th>Result</th>
       </tr>
     </thead>
     <tbody id="table-body">
    <!-- Table creates here -->
     </tbody>
   </table>
 </div>

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

1. Каково точное ожидание? Я вижу, что код работает нормально. Нужна ясность. @Sauce

2. Я хочу создать функцию, которая вставляет столько таблиц, сколько я хочу, в мой HTML-код. Таблицы имеют одинаковое количество столбцов (2). @Anglesvar Cheenu

3. Если вы хотите создать количество таблиц в зависимости от количества имеющихся у вас данных, вы должны создавать таблицу каждый раз. Вам не следует определять таблицу в вашем HTML-файле. Вы должны создать таблицу при доступе к данным, и вы должны id определить для каждой таблицы. Это правильный способ приблизиться к вашим ожиданиям.

4. Заголовки таблиц совпадают? («код», «результат»)?

5. Да, заголовки одинаковы в каждой таблице.

Ответ №1:

 var firstTable = [
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablabla',
    }
]
    var secondTable = [
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  }
]

const addTable = (param)=>{
        let tab = `<table>`;
        let newtab= `<tr><th>Code</th><th>result</th></tr>`;
        for (var i = 0; i < param.length; i  ) {
             newtab  = `<tr><td>${param[i].code}</td><td>${param[i].result}</td></tr>`;
        }
        tab =`${newtab}</table>`;
        display.innerHTML  = tab;
     }
   addTable(firstTable);
   addTable(secondTable);  
 <div id="display"></div>

Создайте параметризованную функцию, передайте функции объект JSON таблицы, которую вы хотите создать. Запустите цикл в функции, основанный на длине массива переданных вами объектов. Я поместил их в функцию, чтобы включить возможность повторного использования и использовать события для запуска функции всякий раз, когда вы хотите добавить новую таблицу, тем самым делая ее гибкой. Я надеюсь, что это поможет.

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

1. Это помогает, но это решение выводит только последние строки из таблиц.

2. упс, я увидел ошибку, теперь я отредактирую код, чтобы отобразить все.

3. Да, проблема внутри функции цикла

4. Теперь мне просто любопытно. Что, если я хочу иметь теги <table> и <tbody> для каждой таблицы в html и добавлять в скрипт только теги <tr>.

Ответ №2:

Вы можете определить данные, как указано ниже:

 var data = [
    [{
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablablablabla',
    },
    {
        'code': 'blabla',
        'result': 'blablablabla',
    }
],
              //Second Data
[
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  },
  {
      'code': 'blabla',
      'result': 'blablablablablabla',
  }
]

и вы можете создавать таблицу каждый раз, когда вводите новые данные. Что-то вроде этого.

 for(let node=0; node<data.length; node  ){
  //Here create your table with variable node as your id.
  node.foreach((element)=>{
   //append element data to the table created 
  }
}

Надеюсь, это поможет !!.. Удачного кодирования!!