1

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);

asked Aug 20, 2019 at 8:55
5
  • 2
    Please add expected output Commented Aug 20, 2019 at 8:57
  • can you please show the output Commented Aug 20, 2019 at 8:59
  • what are you getting in console.log? Commented Aug 20, 2019 at 9:04
  • @mplungjan kindly find expected output Commented Aug 20, 2019 at 9:40
  • 1
    @AmiteshKumar kindly find expected output Commented Aug 20, 2019 at 9:40

3 Answers 3

1

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

answered Aug 20, 2019 at 9:25
Sign up to request clarification or add additional context in comments.

4 Comments

thanks for the reply, i need the games to be grouped under the dates. please see expected output.
Hi please check now i add one more code in the answer.
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 .
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 
 }
mplungjan
180k29 gold badges183 silver badges246 bronze badges
answered Aug 20, 2019 at 9:02

Comments

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

2 Comments

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

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.