Parse JSON to table by month with Javascript

user_9000111 0
Viewed 1819

I've a trouble to parse JSON object to an html table. Basically my JSON data [EDITED] comes through looking like this:

[  
   {  
      '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
      }
   }
]

I want to create a table like this:

I want to add months start from Jan to Des, with null data if every month has no total value.

I have read a lot about the JSON format and my knowledge is very limited and I need help -__-

I was trying, here's my code :

$(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);
    }
});

Here's the html :

<table>
    <tr>
        <th>Category</th>
        <th>Month</th>
        <th>Total</th>
    </tr>
</table>
html-table arrays jquery json javascript
3 Answers
  1. You need to enclose your categories in quotes.
  2. Grab the total property from the lists object

$(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>

user_35095910

Root cause:

Your json is invalid. Please make sure first you have a valid JSON. You can use any online tool to validate your JSON.

category key has a string value so that value must in quotes And also json[i].lists need to change to json[i].lists.total. Below is working demo:

$(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>

user_6318030

@Zzet answer was perfect this is with just one change 

$(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>

user_51519680
Related