Я действительно новичок в ванильном 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 на основе элементов, которые они приносят.

Я пытался использовать карту, forEach и фильтр, но я не уверен, что я делаю неправильно.

Вот то, что я пробовал, но я не могу найти способ отсортировать их в соответствующие 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);
0
Clyde Steyvor 28 Фев 2018 в 10:25

3 ответа

Лучший ответ

Вам просто нужно перебрать массив и заполнить содержимое внутри div, имеющего соответствующий id:

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>
0
Ankit Agarwal 28 Фев 2018 в 07:32
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

0
Egor Egorov 28 Фев 2018 в 07:42

Вы должны использовать .forEach в своем коде, так как вам просто нужно перебрать все элементы массива.

Шаги, предпринятые здесь:

  • Итерация по элементам массива.
  • Создайте строку HTML, которую вы хотите добавить.
  • Получите селектор, к которому вы хотите добавить, основываясь на значении items.
  • Добавить HTML-строку к селектору, используя .append()
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>
0
void 28 Фев 2018 в 07:33