Какие методы лучше использовать для получения двух пар ключ \ значения?

Question

[Фёдор]

Приветствую! Есть массив объектов. В этих объектах меня интересует только два значения двух ключей, которые я планирую отобразить на сайте. Не знаю, какие методы лучше использовать. Есть мысль через reduce пройтись по массиву и внутри него запустить цикл, сформировав новый объект с новыми нужными ключ \ значениями, которые потом буду отображать на сайте. Или я всё усложняю и можно сделать проще?

Answer 1

[Rsa97]

let newArray = oldArray.map(el => ({prop1: el.prop1, prop2: el.prop2}));

Comments

[Фёдор]

Я правильно понимаю, что это Деструктурирующее присваивание?
({prop1: el.prop1, prop2: el.prop2}))

[Сергей Соколов]

Фёдор, нет, это просто вернёт новый объект, то же самое, что

oldArray.map(function(el) {
  return {
    prop1: el.prop1,
    prop2: el.prop2,
  }
});

[Фёдор]

Сергей Соколов, Это я понимаю. Мне совсем непонятно, почему по примеру выше, у меня выдаёт ошибку:

Uncaught (in promise) TypeError: statCovid.map is not a function

[Rsa97]

Фёдор, А переменная statCovid - это точно массив?

[Фёдор]

Rsa97, Да, приходит массив, внутри которого находятся объекты.

[Rsa97]

Фёдор, А что такое <value>? Обычно в консоли показывается тип переменной, здесь больше похоже на поле какого-то объекта.

[Фёдор]

Rsa97, Я так понимаю, что в FF в value равносильно PromiseResult в Google Chrome:

[Rsa97]

Фёдор, То есть, в statCovid записан Promise, а не Array? Тогда всё логично, у промиса нет функции map.

[Фёдор]

Rsa97,
Почему тут тогда сработал map?

async function getUsers() {
    let response = await fetch('https://jsonplaceholder.typicode.com/users');
    let users = await response.json();
    
    let getUsersName =  users.map( user => user.name);

    getUsersName.forEach(element => {
        p.innerHTML = p.innerHTML+ '<p>' +element;
    });
}
getUsers();

[Rsa97]

Фёдор, Потому что fetch() возвращает промис, а await возвращает результат успешного промиса.

[Фёдор]

Rsa97, Посмотрев на свой скрин ещё раз и прочитав ваше сообщение, нашёл ошибку в коде. У меня тупо не был прописан:

await response.json()

Господи, теперь то всё заработало.

Answer 2

[Сергей Соколов]

Можно с destructuring assignment примерно так:
oldArray.map(({prop1, prop2} => ({prop1, prop2}))

const oldArray = [
  {a: "A1", b: "BB1", prop1: "wanted1", prop2: "dead or alive1", z: "zee1"},
  {a: "A2", b: "BB2", prop1: "wanted2", prop2: "dead or alive2", z: "zee2"},
  {a: "A3", b: "BB3", prop1: "wanted3", prop2: "dead or alive3", z: "zee3"},
  {a: "A4", b: "BB4", prop1: "wanted4", prop2: "dead or alive4", z: "zee4"},
  {a: "A5", b: "BB5", prop1: "wanted5", prop2: "dead or alive5", z: "zee5"},
];

const newArray = oldArray.map(({prop1, prop2}) => ({prop1, prop2}));
// [
//   {"prop1": "wanted1", "prop2": "dead or alive1"},
//   {"prop1": "wanted2", "prop2": "dead or alive2"},
//   {"prop1": "wanted3", "prop2": "dead or alive3"},
//   {"prop1": "wanted4", "prop2": "dead or alive4"},
//   {"prop1": "wanted5", "prop2": "dead or alive5"}
// ]