JavaScript 对 JSON 数据进行排序并根据键值动态生成 和 元素

Question

我正在尝试根据从 PHP 脚本获取的 JSON 数据动态生成一些 HTML 列表。返回的数据格式如下:

示例 JSON 数据:

[{"animal":"Dog","breed":"German Shepard","image":"germanshepard.png","ownerID":"885","Status":"Check In"},
{"animal":"Dog","breed":"Poodle","image":"poodle.png","ownerID":"131","Status":"Checked In"},
{"animal":"Dog","breed":"Labrador","image":"labrador.png","ownerID":"6","Status":"Waiting Consultation"},
{"animal":"Bird","breed":"Parrot","image":"parrot.png","ownerID":"22","Status":"Checked In"},
{"animal":"Bird","breed":"Finch","image":"finch.png","ownerID":"31","Status":"Checked In"},
{"animal":"Cat","breed":"Persian","image":"persian.png","ownerID":"19","Status":"Waiting Consultation"},
{"animal":"Cat","breed":"Sphynx","image":" sphynx.png","ownerID":"44","Status":"Allocated Kennel"}]

我正在尝试为每个独特的动物创建一个 div，即。每个独特的动物 1 个 div。例如。

<div class='dog'></div>

在每个 div 中，我尝试为每个独特的品种添加一个 ul，例如。

<ul class='Poodle'></ul>

最终结果如下所示:

ul {
background: #fff;
color: #000;
border: 1 px thin solid #000;
}

/* repeat for all status classes */
.Checked In {
color: 'green';
}

<section id='container'>
<div class='Dog'>    
    <ul class='German Shepard'>
       <li><img src='germanshepard.png'/></li>
       <li class='${ownerID}'>885</li>
       <li class='${Status}'>Check In</li>
    </ul>    
    <ul class='Poodle'>
       <li><img src='poodle.png'/></li>
       <li class='${ownerID}'>131</li>
       <li class='${Status}'>Checked In</li>
    </ul>
</div>    
<div class='Bird'>    
    <ul class='Parrot'>
       <li><img src='parrot.png'/></li>
       <li class='${ownerID}'>22</li>
       <li class='${Status}'>Checked In</li>
    </ul>    
    <ul class='Finch'>
       <li><img src='finch.png'/></li>
       <li class='${ownerID}'>31</li>
       <li class='${Status}'>Checked In</li>
    </ul>
</div>
</section>

我像这样返回数据:

function getAnimalData() {
let url = "php/getAnimalData.php";
fetch(url)
    .then((res) => res.json())
    .then((data) => {
        for (const [key, value] of Object.entries(data)) {
            byID('container').insertAdjacentHTML('afterend', 
            `<div class="${value['animal']}">
              <ul class="${value['breed']}">
               <li class="${value['image']}"></li>
               <li class="${value['owner']}"></li>
               <li class="${value['status']}"></li>
              </ul>
            </div>`);
        }
    }).catch(err => {
        return Promise.reject(err.message);
    });
}

正如您所见，这不会过滤独特的动物，而是为每个动物创建一个 div，并在其下面包含每个品种。我在 stackoverflow ( 1 for example ) 上尝试了一些解决方案 - 其中大多数涉及创建一系列不同的动物名称，然后循环遍历它以创建多个 ul 元素，然后通过再次循环遍历一系列独特的品种来附加 li 和适当追加。不幸的是，我还没有找到一个有效的解决方案，任何接近有效的方法都是使用 jQuery、knockout 等(我非常希望不使用 jQuery)。

我愿意接受有关如何使用 Vanilla JavaScript 实现这一目标的建议 - 或者这是返回绘图板并以不同方式格式化 JSON 数据的情况。

Answer 1

您可以使用此groupBy函数

function groupBy(list, props) {
  return list.reduce((a, b) => {
     (a[b[props]] = a[b[props]] || []).push(b);
     return a;
  }, {});
}
//https://gist.github.com/ramsunvtech/102ac0267d33c2cc1ccdf9158d0f7fca

usage: groupBy([{
  id: 1,
  group: 'user',
  name: 'User #1',
}, {
  id: 2,
  group: 'admin',
  name: 'User #2',
}, {
  id: 3,
  group: 'moderator',
  name: 'User #3',
}], 'group');

然后使用 Object.entries 循环遍历分组列表以填充您的模板