How to display an array result to html

Question

I am grouping a set of items by Date in this example, I want the return "groupArrays" to be displayed in an html.

Firstly, group ids must be created for each date or date can be used as group id then the list of games for the dates should be listed under the date as shown in the output below. thanks in advance.

I expect the output of

<div id="items"><div id="group-1"> 
 <div class="Date">2017-10-04</div>        
 <ul class="Games">  
<li game_id="1">notes: 'Game was played', time: '2017-10-04T20:24:30+00:00', sport: 'hockey', owner: 'steve', players: '10', game_id: 1</li>    
<li game_id="2">notes: 'Game was played', time: '2017-10-04T12:35:30+00:00', sport: 'lacrosse', owner: 'steve', players: '6', game_id: 2</li>   
  <li game_id="4">notes: 'Game was played', time: '2017-10-04T10:12:30+00:00', sport: 'hockey', owner: 'henry', players: '10', game_id: 4</li>           
 </ul>
 </div> 
 <div id="group-2"> 
 <div class="Date">2017-10-14</div>        
 <ul class="Games">  
<li game_id="3">notes: 'Game was played', time: '2017-10-14T20:32:30+00:00', sport: 'hockey', owner: 'steve', players: '4', game_id: 3</li>    
<li game_id="5">notes: 'Game was played', time: '2017-10-14T20:34:30+00:00', sport: 'soccer', owner: 'john', players: '12', game_id: 5 </li>          
 </ul>
   </div>         
      </div>

const data = [
      {notes: 'Game was played', time: '2017-10-04T20:24:30+00:00', sport: 'hockey', owner: 'steve', players: '10', game_id: 1},
      { notes: 'Game was played', time: '2017-10-04T12:35:30+00:00', sport: 'lacrosse', owner: 'steve', players: '6', game_id: 2 },
      { notes: 'Game was played', time: '2017-10-14T20:32:30+00:00', sport: 'hockey', owner: 'steve', players: '4', game_id: 3 },
      { notes: 'Game was played', time: '2017-10-04T10:12:30+00:00', sport: 'hockey', owner: 'henry', players: '10', game_id: 4 },
      { notes: 'Game was played', time: '2017-10-14T20:34:30+00:00', sport: 'soccer', owner: 'john', players: '12', game_id: 5 }
    ];

// this gives an object with dates as keys
    const groups = data.reduce((groups, game) => {
      const date = game.time.split('T')[0];
      if (!groups[date]) {
        groups[date] = [];
      }
      groups[date].push(game);
      return groups;
    }, {});

// Edit: to add it in the array format instead
const groupArrays = Object.keys(groups).map((date) => {
  return {
    date,
    games: groups[date]
  };
});

console.log(groupArrays);

Please add expected output

mplungjan
– mplungjan

2019-08-20 08:57:42 +00:00
Commented Aug 20, 2019 at 8:57 — mplungjan
– mplungjan, Commented Aug 20, 2019 at 8:57
can you please show the output

Amitesh Kumar
– Amitesh Kumar

2019-08-20 08:59:31 +00:00
Commented Aug 20, 2019 at 8:59 — Amitesh Kumar
– Amitesh Kumar, Commented Aug 20, 2019 at 8:59
what are you getting in console.log?

Iiskaandar
– Iiskaandar

2019-08-20 09:04:42 +00:00
Commented Aug 20, 2019 at 9:04 — Iiskaandar
– Iiskaandar, Commented Aug 20, 2019 at 9:04
@mplungjan kindly find expected output

FiifiDes
– FiifiDes

2019-08-20 09:40:04 +00:00
Commented Aug 20, 2019 at 9:40 — FiifiDes
– FiifiDes, Commented Aug 20, 2019 at 9:40
@AmiteshKumar kindly find expected output

FiifiDes
– FiifiDes

2019-08-20 09:40:23 +00:00
Commented Aug 20, 2019 at 9:40 — FiifiDes
– FiifiDes, Commented Aug 20, 2019 at 9:40

Amitesh Kumar · Accepted Answer · 2019-08-20 10:13:46Z

Here is the the answer hope it may helps you :

<!DOCTYPE html>
<html>
<body>

<p>Loopin through an array using a for loop:</p>

<p id="demo"></p>

<script>
var date = '';
const data = [
          {notes: 'Game was played', time: '2017-10-04T20:24:30+00:00', sport: 'hockey', owner: 'steve', players: '10', game_id: 1},
          { notes: 'Game was played', time: '2017-10-04T12:35:30+00:00', sport: 'lacrosse', owner: 'steve', players: '6', game_id: 2 },
          { notes: 'Game was played', time: '2017-10-14T20:32:30+00:00', sport: 'hockey', owner: 'steve', players: '4', game_id: 3 },
          { notes: 'Game was played', time: '2017-10-04T10:12:30+00:00', sport: 'hockey', owner: 'henry', players: '10', game_id: 4 },
          { notes: 'Game was played', time: '2017-10-14T20:34:30+00:00', sport: 'soccer', owner: 'john', players: '12', game_id: 5 }
        ];

    // this gives an object with dates as keys
        const groups = data.reduce((groups, game) => {
          const date = game.time.split('T')[0];
          if (!groups[date]) {
            groups[date] = [];
          }
          groups[date].push(game);
          return groups;
        }, {});

    // Edit: to add it in the array format instead
    const groupArrays = Object.keys(groups).map((date) => {
      return {
        date,
        games: groups[date]
      };
    });

    console.log(groupArrays);

for (i = 0; i < groupArrays.length; i++) {
    for (j = 0; j < groupArrays[i].games.length; j++) {
        console.log(groupArrays[i].games[j]);
      date += "<br>date: "+ groupArrays[i].date + "<br> Games: " +      "<br> Notes:  " + groupArrays[i].games[j].notes + "<br> Sport:  " + groupArrays[i].games[j].sport
     + "<br> Owner:  " + groupArrays[i].games[j].owner 
      + "<br> Players:  " + groupArrays[i].games[j].players 
      +"<br> Game ID:  " + groupArrays[i].games[j].game_id

      + "<br> "
    }

}
document.getElementById("demo").innerHTML = date;
</script>

</body>
</html>

Js Fiddle Link

Modified Answer :

<!DOCTYPE html>
<html>
<body>

<p>Loopin through an array using a for loop:</p>

<p id="demo">
    <ul id="myList">
     </ul>
</p>

<script>
var date = '';
var date_val = '';
const data = [
          {notes: 'Game was played', time: '2017-10-04T20:24:30+00:00', sport: 'hockey', owner: 'steve', players: '10', game_id: 1},
          { notes: 'Game was played', time: '2017-10-04T12:35:30+00:00', sport: 'lacrosse', owner: 'steve', players: '6', game_id: 2 },
          { notes: 'Game was played', time: '2017-10-14T20:32:30+00:00', sport: 'hockey', owner: 'steve', players: '4', game_id: 3 },
          { notes: 'Game was played', time: '2017-10-04T10:12:30+00:00', sport: 'hockey', owner: 'henry', players: '10', game_id: 4 },
          { notes: 'Game was played', time: '2017-10-14T20:34:30+00:00', sport: 'soccer', owner: 'john', players: '12', game_id: 5 }
        ];

    // this gives an object with dates as keys
        const groups = data.reduce((groups, game) => {
          const date = game.time.split('T')[0];
          if (!groups[date]) {
            groups[date] = [];
          }
          groups[date].push(game);
          return groups;
        }, {});

    // Edit: to add it in the array format instead
    const groupArrays = Object.keys(groups).map((date) => {
      return {
        date,
        games: groups[date]
      };
    });

    console.log(groupArrays);

for (i = 0; i < groupArrays.length; i++) {
     date = groupArrays[i].date;
      var para = document.createElement("P");                       
      var t = document.createTextNode(date);      
      para.appendChild(t);                                        
      document.getElementById("demo").appendChild(para);
    var ul = document.createElement("UL");
    for (j = 0; j < groupArrays[i].games.length; j++) {

        console.log(groupArrays[i].games[j]);

        date_val =     " Notes:  " + groupArrays[i].games[j].notes + ", Sport:  " + groupArrays[i].games[j].sport
     + ", Owner:  " + groupArrays[i].games[j].owner 
      + ",Players:  " + groupArrays[i].games[j].players 
      +",Game ID:  " + groupArrays[i].games[j].game_id

      + " ";
      var textnode = document.createTextNode(date_val);

       var li = document.createElement('li');
            li.setAttribute('class','item');

            ul.appendChild(li);

            li.innerHTML=li.innerHTML + date_val;
      ul.appendChild(li);



    }
         document.getElementById("demo").appendChild(ul);


}

</script>

</body>
</html>

Modifed answer fiddle link

thanks for the reply, i need the games to be grouped under the dates. please see expected output.
Please guide me to understand how you divide array list in 3:2?
If you see the code groupArrays is a two dimensional array , show i used two nested loops one for date and another for sports, in outer loop i created a P tag for date and in inner loop i created Ul and li tag to store remaining information. Check the code and try to dry run you will understand .

mplungjan · Accepted Answer · 2019-08-20 09:04:11Z

1

Inside your function where you get the data

 for (i = 0, len = groupArrays.length"; i < len; i++) {    
     var obj= document.getElementById('dateId');
      obj.innerHTML += groupArrays[i].date 
       var obj2= document.getElementById('gameId');
      obj2.innerHTML += groupArrays[i].game  
 }

edited Aug 20, 2019 at 9:04

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Aug 20, 2019 at 9:02

Rebai Ahmed

1,6301 gold badge15 silver badges24 bronze badges

Comments

Santanu · Accepted Answer · 2019-08-20 09:41:16Z

0

$(document).ready(function(){
  var fruitsArray = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
  $.each(fruitsArray, function(index, value){
    $(".result-1").append(index + ": " + value + '<br>');
  });
});

$(document).ready(function(){
  var supercarObject = {"brand": "Lamborghini", "model" : "Huracan", "origin": "Italy"};
  $.each(supercarObject, function(key, value){
    $(".result-2").append(key + ": " + value + '<br>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='results'>
     <p>Below the result only array value with index value</p>
     <div class="result-1"></div>
</div>
<p>=====================</p>
<div class='results'>
      <p>Below the result only array value with key value </p>
      <div class="result-2"></div>
</div>
<p>========================================</p>
<p>OR you can check abnother query:</p>
<a href='https://codepen.io/santanup789/details/zVxPEe'>Get values from fields in an array and print those values</a>

answered Aug 20, 2019 at 9:41

Santanu

1511 silver badge6 bronze badges

2 Comments

FiifiDes Over a year ago

kindly find expected output

Santanu Over a year ago

You want show the detailed info all games of a single day.. am i right?

Collectives™ on Stack Overflow

How to display an array result to html

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related