Не выводит данные в html таблицу из json

132
16 января 2020, 07:30

У меня есть 3 значения в файле: дата, название филиала и сумма:

"values":[  
            {  
               "x":"02 (26.03.19-01.04.19)",
               "y":"МОСКВА",
               "value":119328.59
            },

Получилось вывести филиал и сумму, а вот по датам не получилось, как можно это исправить?

$(document).ready(function() {
  $.ajax({
    url: 'filial.json',
    success: function(json) {
      var someData = [];

      for (var i = 0; i < json.data.length; i++) {
        // console.log(json.data[i].x);
        if (json.data[i]['graphId'] == 10) {
          for (j = 0; j < json.data[i]['values'].length; j++) {
            var name = json.data[i]['values'][j]['y'];
            var period = json.data[i]['values'][j]['x'];
            var found = false;
            var zz;
            for (var z = 0; z < someData.length; z++) {
              if (someData[z].label == name) {
                found = true;
                zz = z;
                break;
              }
            }
            if (!found) {
              someData.push({
                label: name,
                data: []
              });
              zz = someData.length - 1;
            }
            someData[zz].data.push(json.data[i]['values'][j]['value']);
            // if (typeof someData[name] == 'undefined') {
            //     someData[name] = [];
            // }
            // someData[name].push(json.data[i]['values'][j]['value']);
          }
        }
      }
      var html = '<table class="tab"><tr><th>Cборы за 2019 г.</th></tr>';
      for (var i = 0; i < someData.length; i++) {
        html += '<tr><td>' + someData[i].label + '</td>';
        for (var j = 0; j < someData[i].data.length; j++) {
          html += '<td>' + someData[i].data[j] + '</td>';
        }
        html += '</tr>';
      }
      html += '</table>';
      $('#table').append(html);
    }
  });
});
Answer 1

У Вас не сказано, какой должна быть таблица. Я предположил, что первый столбец - место, второй - период, третий - сумма. Результат ниже.

Один важный момент по Вашему коду: избегайте наращивать строковые данные и другие immutable типы путем добавления - это долго и дорого! Каждый раз берется исходная строка, копируется в новое место и к ней добавляется довесок. Используйте массив, а когда закончили добавление элементов, делайте stringArray.join(''). Я заменил Вашу переменную html на массив htmlLines.

$(document).ready(function() { 
  $.ajax({ 
    url: 'filial.json', 
    success: function(json) { 
      var someData = []; 
 
 
      for (var i = 0; i < json.data.length; i++) { 
        // console.log(json.data[i].x); 
        if (json.data[i]['graphId'] == 10) { 
          for (j = 0; j < json.data[i].values.length; j++) { 
            var record = json.data[i].values[j]; 
            var name = record.y; 
            var period = record.x; 
            var value = record.value; 
            var found = false; 
            var zz; 
            for (var z = 0; z < someData.length; z++) { 
              if (someData[z].label == name) { 
                found = true; 
                zz = z; 
                break; 
              } 
            } 
            if (!found) { 
              someData.push({ 
                label: name, 
                data: [], 
                periods: [], 
              }); 
              zz = someData.length - 1; 
            } 
            someData[zz].data.push(value); 
            someData[zz].periods.push(period); 
            // if (typeof someData[name] == 'undefined') { 
            //     someData[name] = []; 
            // } 
            // someData[name].push(json.data[i]['values'][j]['value']); 
          } 
        } 
      } 
 
      var htmlLines = []; 
      htmlLines.push('<table class="tab">') 
      htmlLines.push('<tr><th colspan="3">Cборы за 2019 г.</th></tr>'); 
      htmlLines.push('<tr><th>Место</th><th>Период</th><th>Сумма</th></tr>'); 
      for (var i = 0; i < someData.length; i++) { 
        for (var j = 0; j < someData[i].data.length; j++) { 
          htmlLines.push('<tr>'); 
          if (j===0) { 
            htmlLines.push('<td rowspan="' + someData[i].data.length + '">' + someData[i].label + '</td>'); 
          } 
          htmlLines.push('<td>' + someData[i].periods[j] + '</td>'); 
          htmlLines.push('<td>' + someData[i].data[j] + '</td>'); 
        } 
 
        htmlLines.push('</tr>'); 
      } 
      htmlLines.push('</table>'); 
 
      $('#table').append(htmlLines.join('\n')); 
 
    } 
  }); 
});

READ ALSO
Как при клике добавить значение в input только из родительского блока где находится ссылка

Как при клике добавить значение в input только из родительского блока где находится ссылка

Есть следующая конструкция: Необходимо при клике по ссылке в определенном блоке, добавить заголовок h1 в input поле #field1, а из блока с классомproduct...

122
Как удалить запятые в ul

Как удалить запятые в ul

Есть конструкция, как удалить в ней запятые в конце?

109
Где и как хранить пароль для SmtpClient?

Где и как хранить пароль для SmtpClient?

Планирую из программы отправлять Email по определенным событиямВсе настройки храню через App

120
Как узнать скорость и вектор движения указателя мыши?

Как узнать скорость и вектор движения указателя мыши?

Я начинаю изучать C# и хочу попрактиковаться с векторамиЯ сделал WPF приложение, в котором на ПКМ создаются круги, а если нажать и удерживать...

149