Question

在此示例中，我按日期对一组项目进行分组，我希望将返回的“ groupArrays”显示在html中。

首先，必须为每个日期创建组ID，或者可以将日期用作组ID，然后应在该日期下列出该日期的游戏列表，如下面的输出所示。预先感谢。

我希望

的输出

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

Answer 1

在获取数据的函数中

 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  
 }

Answer 2

以下是希望对您有帮助的答案：

<!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

修改后的答案：

<!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

Answer 3

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

如何将数组结果显示为html

3 个答案: