JavaScript对JSON数据进行排序并动态生成<；ul>；及<；李>；基于键值的元素

我试图根据从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，即每种独特的动物创建一个div。例如

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

签入



已签入



已签入



已签入

您可以使用此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循环浏览分组列表要填充模板，请首先操作数据：

fetch(url)
    .then((res) => res.json())
    .then((data) => { // assuming data is an array of items
        const hash = {}
        for (let item of data) {
           if (!hash[item.animal])
              hash[item.animal] = []
           hash[item.animal].push(item)

这将导致对象具有每种动物的嵌套值

下一步：仅填充标题

for (let kind in hash) {
     byID('container').insertAdjacentHTML('afterend', `<div>${kind}</div>`)
}

for（让种类进入散列）{
byID（'container'）。insertAdjacentHTML（'afterend'，`${kind}`）
}

最后一步：在每个标题下添加相关控件

for (let kind in hash) {
   byID('container').insertAdjacentHTML('afterend', `<div>${kind}</div>`)
   for (const value of hash[kind])) {
        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>`);
    }

for（让种类进入散列）{
byID（'container'）。insertAdjacentHTML（'afterend'，`${kind}`）
for（哈希[kind]的常量值）{
byID（'container'）。insertAdjacentHTML（'afterend'，
`




`);
}

---

}您需要将接收到的数据分组

您的代码应该像这样更新

function getAnimalData() {
let url = "php/getAnimalData.php";
fetch(url)
    .then((res) => res.json())
    .then((data) => {
        const groupedData = data.reduce((a,obj) => {
        if (a[obj.animal] === undefined) a[obj.animal] = [obj]
        else a[obj.animal].push(obj)
        return a;
        }, {})
        groupedData.forEach((animals) => {
          animals.forEach((animal) => {
          for (const [key, value] of Object.entries(animal)) {
            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);
    });
}

函数getAnimalData（）{ 让url=“php/getAnimalData.php”； 获取（url） .然后（（res）=>res.json（）） 。然后（（数据）=>{ const groupedData=data.reduce（（a，obj）=>{ 如果（一个[obj.动物]==未定义）一个[obj.动物]=[obj] 还有一个[obj.animal]。推（obj） 返回a； }, {}) groupedData.forEach（（动物）=>{ 动物。forEach（（动物）=>{ for（对象项（动物）的常量[键，值]）{ byID（'container'）。insertAdjacentHTML（'afterend'， `

`); } }) }) }).catch（错误=>{ 返回承诺。拒绝（错误消息）； }); } 请注意，我将动物分组，然后逐一查看

---

干杯

我能想到的最好方法是使用.reduce（）方法。下面是JS实现。您可以定义一个全局变量并使用方法来附加/替换DOM元素，而不是对象方法

const数组=[
{“动物”：“狗”，“品种”：“德国牧羊犬”，“图像”：“germanshepard.png”，“所有者ID”：“885”，“状态”：“登记”}，
{“动物”：“狗”，“品种”：“狮子狗”，“图像”：“Poodle.png”，“所有者ID”：“131”，“状态”：“签入”}，
{“动物”：“狗”，“品种”：“拉布拉多”，“图像”：“Labrador.png”，“所有者”：“6”，“状态”：“等待咨询”}，
{“动物”：“鸟”，“品种”：“鹦鹉”，“图像”：“Parrot.png”，“所有者ID”：“22”，“状态”：“签入”}，
{“动物”：“鸟”，“品种”：“雀”，“图像”：“Finch.png”，“所有者ID”：“31”，“状态”：“签入”}，
{“动物”：“猫”，“品种”：“波斯”，“图像”：“波斯语.png”，“所有者ID”：“19”，“状态”：“等待咨询”}，
{“动物”：“猫”，“品种”：“Sphynx”，“图像”：“Sphynx.png”，“所有者ID”：“44”，“状态”：“分配犬舍”}
]
常量结果=数组。减少（（上一个，当前）=>({
…上一页，
[当前动物]：{
…上一个[当前动物]，
[当前品种]：{
…（以前的[货币动物]|{}[货币品种]|{}，
图片：curr.image，
所有者：curr.ownerID，
状态：当前状态
}
}
}), {})
console.log（结果）

此解决方案首先按动物整理数据。然后枚举这个经过整理的对象并计算HTML

const data=[{“animal”：“Dog”，“breed”：“germanshepard”，“image”：“germanshepard.png”，“ownerID”：“Check In”}，{“animal”：“Dog”，“breed”：“Poodle”，“image”：“Poodle.png”，“ownerID”：“131”，“status”：“Check In”}，{“animal”：“Dog”，“breed”：“Labrador.png”，“ownerID”：“6”，“status”：“Waiting con诊”}，{“animal“Parrot”，“image”：“Parrot.png”，“ownerID”：“22”，“status”：“Checked In”}，{“animal”：“Bird”，“breed”：“Finch”，“image”：“Finch.png”，“ownerID”：“31”，“status”：“Checked In”}，{“animal”：“Cat”，“breed”：“posian”，“ownerID”：“19”，“status”：“Waiting consulting Consultation”}，{“animal”：“Cat”，“breed”：“Sphynx”，“image”：“Sphynx.png”，“ownerID”：“44”，“status”：分配犬舍“}]
const collate=（数据）=>data.reduce（（acc，{动物、品种、图像、所有者ID、状态}）=>{
acc[动物]=acc[动物]|{}
acc[动物][品种]=acc[动物][品种]|{
acc[动物][品种]={图像，所有者ID，状态}
返回acc
}, {})
consttohtml=（data）=>`${Object.entries（collate（data））.reduce（（str，e）=>str+=animalHTML（e），“”）}
`
const animalHTML=（[动物，品种]）=>`
${Object.entries（brides）.reduce（（str，b）=>str+=breedHTML（b），“”）}`
const breedHTML=（[BREAD，{image，ownerID，status}]）=>
`





`
console.log（toHTML（data））

您应该重新格式化数据。通过forEach将所有记录附加到一个对象上，该对象将动物作为组织数据的最佳解决方案，您可以轻松做到这一点-您建议如何生成HTML和

function getAnimalData() {
let url = "php/getAnimalData.php";
fetch(url)
    .then((res) => res.json())
    .then((data) => {
        const groupedData = data.reduce((a,obj) => {
        if (a[obj.animal] === undefined) a[obj.animal] = [obj]
        else a[obj.animal].push(obj)
        return a;
        }, {})
        groupedData.forEach((animals) => {
          animals.forEach((animal) => {
          for (const [key, value] of Object.entries(animal)) {
            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);
    });
}