使用 Javascript 按月将 JSON 解析为表格答案

【问题标题】：Parse JSON to table by month with Javascript使用 Javascript 按月将 JSON 解析为表格
【发布时间】：2019-02-08 02:52:36
【问题描述】：

我很难将 JSON 对象解析为 html 表。基本上我的 JSON 数据 [EDITED] 看起来像这样：

[  
   {  
      'category': 'Automotive (Motor)',
      'month':8,
      'month_now':'Aug',
      'year':2018,
      'lists':{  
         'total':1,
         'price':591600
      }
   },
   {  
      'category': 'Health',
      'month_now':'Aug',
      'month':8,
      'year':2018,
      'lists':{  
         'total':21,
         'price':14448600
      }
   }
]

我想创建一个这样的表：

我想添加从 Jan 到 Des 的月份，如果每个月都没有总值，则使用 null 数据。

我已经阅读了很多关于 JSON 格式的知识，但我的知识非常有限，我需要帮助-__-

我正在尝试，这是我的代码：

$(document).ready(function () {

    var json = [{'category': Automotive (Motor),'month': 8, 'month_now': 'Aug', 'year': 2018, 'lists': {'total': 1, 'price': 591600}}, {'category': Health, 'month_now': 'Aug', 'month': 8, 'year': 2018, 'lists': {'total': 21, 'price': 14448600}}];
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].category + "</td>");
        tr.append("<td>" + json[i].month + "</td>");
        tr.append("<td>" + json[i].lists + "</td>");
        $('table').append(tr);
    }
});

这是html：

<table>
    <tr>
        <th>Category</th>
        <th>Month</th>
        <th>Total</th>
    </tr>
</table>

【问题讨论】：

那么你现在面临什么问题？
我想添加一个包含每个月的值的表。非常感谢，我得到了他们 Zze 和 VicJordan 的帮助

标签： javascript jquery arrays json html-table

【解决方案1】：

您需要用引号将您的类别括起来。
从列表对象中获取total 属性

$(document).ready(function() {
  var json = [{
    'category': 'Automotive (Motor)',
    'month': 8,
    'month_now': 'Aug',
    'year': 2018,
    'lists': {
      'total': 1,
      'price': 591600
    }
  }, {
    'category': 'Health',
    'month_now': 'Aug',
    'month': 8,
    'year': 2018,
    'lists': {
      'total': 21,
      'price': 14448600
    }
  }];

  var tr;
  for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    for (var ii = 0; ii < 12; ii++) {
      tr.append($('<td>'));
    }

    tr.find('td:eq(0)').html(json[i].category);
    tr.find('td:eq('+json[i].month+')').html(json[i].lists.total);
    
    $('table').append(tr);
  }
});

table {
  width: 100%;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Unit</th>
    <th>J</th>
    <th>F</th>
    <th>M</th>
    <th>A</th>
    <th>M</th>
    <th>J</th>
    <th>J</th>
    <th>A</th>
    <th>S</th>
    <th>O</th>
    <th>N</th>
    <th>D</th>
  </tr>
</table>

【讨论】：

哦，曼恩，我非常感谢您考虑我的问题：D，它有效！

【解决方案2】：

根本原因：

您的json 无效。请首先确保您拥有有效的 JSON。您可以使用任何 online tool 来验证您的 JSON。

category 键有一个字符串值，因此值必须用引号括起来，而且json[i].lists 需要更改为json[i].lists.total。下面是工作演示：

$(document).ready(function() {

  var json = [{
    'category': 'Automotive(Motor)',
    'month': 8,
    'month_now': 'Aug',
    'year': 2018,
    'lists': {
      'total': 1,
      'price': 591600
    }
  }, {
    'category': 'Health',
    'month_now': 'Aug',
    'month': 8,
    'year': 2018,
    'lists': {
      'total': 21,
      'price': 14448600
    }
  }];
  var tr;
  for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].category + "</td>");
    tr.append("<td>" + json[i].month + "</td>");
    tr.append("<td>" + json[i].lists.total + "</td>");
    $('table').append(tr);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Category</th>
    <th>Month</th>
    <th>Total</th>
  </tr>
</table>

【讨论】：

谢谢我的friendddd :) 非常感谢您的帮助和纠正我，我犯了一个错误，值必须是有效的 JSON 数据类型

【解决方案3】：

@Zzet answer 很完美，这只是一个变化

$(document).ready(function() {
  var json = [{
    'category': 'Automotive (Motor)',
    'month': 8,
    'month_now': 'Aug',
    'year': 2018,
    'lists': {
      'total': 1,
      'price': 591600
    }
  }, {
    'category': 'Health',
    'month_now': 'Aug',
    'month': 8,
    'year': 2018,
    'lists': {
      'total': 21,
      'price': 14448600
    }
  }];

  var tr;
  for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    for (var ii = 0; ii < 12; ii++) {
      tr.append($('<td>0</td>'));
    }

    tr.find('td:eq(0)').html(json[i].category);
    tr.find('td:eq('+json[i].month+')').html(json[i].lists.total);
    
    $('table').append(tr);
  }
});

table {
  width: 100%;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Unit</th>
    <th>J</th>
    <th>F</th>
    <th>M</th>
    <th>A</th>
    <th>M</th>
    <th>J</th>
    <th>J</th>
    <th>A</th>
    <th>S</th>
    <th>O</th>
    <th>N</th>
    <th>D</th>
  </tr>
</table>

【讨论】：