如何基于键值对对对象进行排序和显示JavaScript

Question

我对香草JavaScript真的很陌生，所以请多多包涵。

所以我有一个看起来像这样的对象数组：

 var partyGuests =[ { firstName: "Wayne", lastName: "Gretzky", items: "birthday cake" }, { firstName: "Emily", lastName: "Janeson", items: "balloons" }, { firstName: "Gordon", lastName: "Ramsey", items: "balloons" }, { firstName: "Jasmine", lastName: "Quaker", items: "birthday cake" } ] 

如果他们携带“气球”，则将其附加到<div id="balloonGroup"> ；如果他们携带“生日蛋糕”，则将其附加到<div id="cakeGroup">

我希望将对象的整个数组显示在页面上（包括名称，姓氏和项目），但要根据它们带来的项目显示在div中。

我已经尝试过使用map，forEach和filter，但是我不确定自己在做什么错。

这是我尝试过的方法，但无法找到将它们分类为适当的div的方法。

 let guests = partyGuests.map(res=>{ return res; }) function groupAssignment(value, index){ const FirstName = `<li>Name: ${value.firstName}</li>`; const LastName = `<li> Last Name: ${value.lastName}</li>`; const Item = `<li>Item: ${value.item}</li>`; $("#1").append(firstName, lastName, Item); } guests.forEach(groupAssignment); 

Answer 1

您只需要简单地遍历数组，并在具有各自id的div中填充内容：

 var partyGuests =[ { firstName: "Wayne", lastName: "Gretzky", items: "birthday cake" }, { firstName: "Emily", lastName: "Janeson", items: "balloons" }, { firstName: "Gordon", lastName: "Ramsey", items: "balloons" }, { firstName: "Jasmine", lastName: "Quaker", items: "birthday cake" } ]; partyGuests.forEach((obj)=>{ if(obj.items === 'balloons'){ $('#balloonGroup').append( obj.firstName + ' ' + obj.lastName + ' ' + obj.items + '<br>' ); } if(obj.items === 'birthday cake'){ $('#cakeGroup').append( obj.firstName + ' ' + obj.lastName + ' ' + obj.items + '<br>' ); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="balloonGroup"></div> <div id="cakeGroup"></div> 

Answer 2

您应该在代码中使用.forEach ，因为您只需要遍历所有数组元素。

这里采取的步骤是：

• 迭代数组元素。
• 构建一个要附加的HTML字符串。
• 根据items值获取要附加到的选择器。
• 使用.append()将html字符串附加到选择器

 var partyGuests = [{ firstName: "Wayne", lastName: "Gretzky", items: "birthday cake" }, { firstName: "Emily", lastName: "Janeson", items: "balloons" }, { firstName: "Gordon", lastName: "Ramsey", items: "balloons" }, { firstName: "Jasmine", lastName: "Quaker", items: "birthday cake" } ]; partyGuests.forEach( el => { var _html = '<p><strong>First Name:</strong>' + el.firstName + '<br>' + '<strong>Last Name:</strong>' + el.lastName + '<br>' + '<strong>Items:</strong>' + el.items + '<br></p>'; var elem = ""; if (el.items === "birthday cake") elem = '#cakeGroup'; else if (el.items === "balloons") elem = '#balloonGroup'; $(elem).append(_html); } ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="balloonGroup"> <h3>Balloons</h3> </div> <div id="cakeGroup"> <h3>Cakes</h3> </div> 

Answer 3

for(var i=0; i<partyGuests.length; i++){
  if (partyGuests[i].items == "birthday cake") {
   //append to cakeGroup here 
  } else if (partyGuests[i].items == "balloons") {
   //append to balloonGroup
  }
}

遍历访客数组并检查items属性