I have an ajax call like this:

  $.ajax({
    type: 'POST',
    url: 'assets/ajax/get-results.php',
    dataType: 'json',
    cache: false,
    data: {}, 
    success: function (data) {
      console.log(data);
      
      for(var i = 0; i < data.length; i  ) {
          var obj = data[i];

          console.log(obj);
      }          
    }
  });

console.log(data) gives me:

(2) [{…}, {…}]
 0: {sum: 10, month: 'november', year: '2021', type: 'bezoeken'}
 1: {sum: 50, month: 'oktober', year: '2021', type: 'bezoeken'}
 length: 2
[[Prototype]]: Array(0)

console.log(obj) split the array into 2 pieces:

{sum: 10, month: 'november', year: '2021', type: 'bezoeken'}
 month: "november"
 sum: 10
 type: "bezoeken"
 year: "2021"
[[Prototype]]: Object


{sum: 50, month: 'oktober', year: '2021', type: 'bezoeken'}
 month: "oktober"
 sum: 50
 type: "bezoeken"
 year: "2021"
[[Prototype]]: Object

But want i want is a foreach on the month, year and type because i want to know what the sum is per month, year and type. Because this data should be viewed in different HTML tables splitted per month.

HTML table view

CodePudding user response：

It looks like your data is an array of objects, ie:

var your_data = [
    {sum: 10, month: 'november', year: '2021', type: 'bezoeken'},
    {sum: 50, month: 'oktober', year: '2021', type: 'bezoeken'}
];  

So if you want to:

• iterate over those objects
• access various properties of those objects

You can do something like:

for(var i = 0; i < your_data.length; i  ) {

    var year = your_data[i]['year']; 
    var month= your_data[i]['month']; 
    var type = your_data[i]['type'];
    var sum = your_data[i]['sum'];

    console.log("year: "   year   ", "   "month: "   month   ", "   "type: "   type   ", "   "sum: "   sum);
} 

The above 'solution' is assuming your data is how you want it - ie you don't need to do any more aggregation on the year, month, type and sum from additional data.

In regards to getting those values into a table, there are many different ways you could do it.

Below is a simple example that may help you decide what you do, or don't, want in your solution.

Here is link to jsFiddle if you want to play around with it.

var your_data = [{
    sum: 10,
    month: 'november',
    year: '2021',
    type: 'bezoeken'
  },
  {
    sum: 50,
    month: 'oktober',
    year: '2021',
    type: 'bezoeken'
  }
];

for (var i = 0; i < your_data.length; i  ) {

  var year = your_data[i]['year'];
  var month = your_data[i]['month'];
  var type = your_data[i]['type'];
  var sum = your_data[i]['sum'];

  var row_html = `
        <tr>
            <td>${year}</td>
            <td>${month}</td>
            <td>${type}</td>
            <td>${sum}</td>
        </tr>
  `;

  $("#your_table").append(row_html);

}

#my_table {
  border: 1px solid;
}

th,
td {
  border: 1px solid #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="your_table">
  <thead>
    <tr>
      <th>Year</th>
      <th>Month</th>
      <th>Type</th>
      <th>Sum</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Thanks to user1063287, my question is solved.

for(var i = 0; i < your_data.length; i  ) {

    var year = your_data[i]['year']; 
    var month= your_data[i]['month']; 
    var type = your_data[i]['type'];
    var sum = your_data[i]['sum'];

    console.log("year: "   year   ", "   "month: "   month   ", "   "type: "   
    type   ", "   "sum: "   sum);
}