zpět k lekci

Mapování na objekty

důležitost: 5

Máme pole objektů uživatel, každý z nich má vlastnosti jméno, příjmení a id.

Napište kód, který z něj vytvoří jiné pole, které bude obsahovat objekty s vlastnostmi id a celéJméno, kde celéJméno se vygeneruje ze jméno a příjmení.

Příklad:

let jan = { jméno: "Jan", příjmení: "Novák", id: 1 };
let petr = { jméno: "Petr", příjmení: "Horák", id: 2 };
let marie = { jméno: "Marie", příjmení: "Králová", id: 3 };

let uživatelé = [ jan, petr, marie ];

let mapovaníUživatelé = /* ... váš kód ... */

/*
mapovaníUživatelé = [
  { celéJméno: "Jan Novák", id: 1 },
  { celéJméno: "Petr Horák", id: 2 },
  { celéJméno: "Marie Králová", id: 3 }
]
*/

alert( mapovaníUživatelé[0].id ) // 1
alert( mapovaníUživatelé[0].celéJméno ) // Jan Novák

Ve skutečnosti tedy potřebujete mapovat jedno pole objektů na druhé. Zkuste zde použít =>. Je tady malý chyták.

let jan = { jméno: "Jan", příjmení: "Novák", id: 1 };
let petr = { jméno: "Petr", příjmení: "Horák", id: 2 };
let marie = { jméno: "Marie", příjmení: "Králová", id: 3 };

let uživatelé = [ jan, petr, marie ];

let mapovaníUživatelé = uživatelé.map(uživatel => ({
  celéJméno: `${uživatel.jméno} ${uživatel.příjmení}`,
  id: uživatel.id
}));

/*
mapovaníUživatelé = [
  { celéJméno: "Jan Novák", id: 1 },
  { celéJméno: "Petr Horák", id: 2 },
  { celéJméno: "Marie Králová", id: 3 }
]
*/

alert( mapovaníUživatelé[0].id ); // 1
alert( mapovaníUživatelé[0].celéJméno ); // Jan Novák

Prosíme všimněte si, že v šipkové funkci musíme použít závorky navíc.

Nemůžeme ji napsat takto:

let mapovaníUživatelé = uživatelé.map(uživatel => {
  celéJméno: `${uživatel.jméno} ${uživatel.příjmení}`,
  id: uživatel.id
});

Jak si pamatujeme, existují dva druhy šipkových funkcí: bez těla hodnota => výraz a s tělem hodnota => {...}.

Zde JavaScript zachází s { jako se začátkem těla funkce, ne jako se začátkem objektu. Řešením je uzavřít objekt do „obyčejných“ závorek:

let mapovaníUživatelé = uživatelé.map(uživatel => ({
  celéJméno: `${uživatel.jméno} ${uživatel.příjmení}`,
  id: uživatel.id
}));

Nyní je to v pořádku.