Tworzenie tablicy z wybranych obiektów

Question

Witam jak stworzyć tablice składającą się z wybranych obiektów pobranych z pliku JSON. poniżej daje plik z danymi

{
    "teams": [
        {
            "team": "Arsenal",
            "players": [
                {
                    "name": "Mesut Ozil"
                },
                {
                    "name": "Nacho Monreal"
                }
            ]
        },
        {
            "team": "Aston Villa",
            "players": [
                {
                    "name": "Jack Grealish"
                },
                {
                    "name": "Ahmed Elmohamady"
                }
            ]
        },
        {
            "team": "Bournemouth",
            "players": [
                {
                    "name": "Artur Boruc"
                },
                {
                    "name": "Jordon Ibe"
                }
            ]
        }

    ]
}

Chciałbym z tego pliku "wyjąć" wszystkie obiekty co mają name i umieścić je jeden po drugim w tablicy. Pytanie czy można dostać się do całego obiektu i go skopiować czy można tylko dostać się do konkretnej wartości czyt. "name". Nie wiem czy nie najlepszą opcją byłoby użycie metody Array.from która jak mówi definicja: 

"Array.from() lets you create Arrays from:

array-like objects (objects with a length property and indexed elements) or
iterable objects (objects where you can get its elements, such as Map and Set)."

w tym przypadku plik dane z JSON'a są "Array-like" ?

Answer 1

Przyjmuję, że cały obiekt, który umieściłeś przypisany będzie do zmiennej o nazwie json.

Można to zrobić na kilka sposobów, m.in.:

• zwykłe pętle for

const playerNames = [];

for (let i = 0; i < json.teams.length; i++) {
	const team = json.teams[i];

	for (let j = 0; j < team.players.length; j++) {
        playerNames.push(team.players[j].name);
    }
}

• Array.prototype.forEach

const names = [];

json.teams.forEach(team => {
    team.players.forEach(player => names.push(player.name))
});

• Array.prototype.flat (nowość w ECMAScript, więc sprawdź wsparcie dla przeglądarki przed użyciem)

const playerNames = json.teams.map(team => {
	const players = team.players.map(player => player.name);
	return players;
}).flat();

• Array.prototype.flatMap (ze wsparciem podobnie do [].flat())

const playerNames = json.teams.flatMap(team => {
	const players = team.players.map(player => player.name);
	return players;
});

• Array.prototype.reduce:

const playerNames = json.teams.reduce((names, team) => {
	const players = team.players.map(player => player.name); 
	names.push(...players); 
	return names;
}, []);

---

Użycie Array.from miało by sens, gdybyś tym obiektom nadał property length o nieujemnej liczbie całkowitej.

Comments

ustawiłem length na 5 i utworzyłem tablice z pięcioma pustymi obiektami. 

const playerArray = Array.from({length: 5},()=>({}));

Teraz chciałbym wypełnić te obiekty wartościami z obiektów z tablicy "players" z pliku JSON.
Używam webpacka i poprostu importuje JSON'a z zewnętrznego pliku a potem odnosze się do niego w JS'ie.

import data from '../data';

Aha zapomniałem dodać że obiekty z tablicy players będą rozbudowywane o kolejne właściwości jak np. ścieżka do obrazka dla danego zawodnika, wiek itp. Do tych wartości będe potem odnosił się w reactowych komponentach. Teraz akurat chce stworzyć komponent, który będzie wyświetlał pięć losowych obiektów zawierających obrazek oraz imię.

 

---

W JavaScript długość tablicy ma wartość dynamiczną. Jaki sens jest tworzyć tablicę o określonej początkowej długości, zawierającą puste obiekty, po to żeby ją potem wypełnić? Ba, ta początkowa długość 5 i tak może ulec zmianie w trakcie późniejszych operacji na tablicy. To wygląda podobnie do takiego zapisu:

const playerNames = new Array(5).fill({});

 

---

Nie chcę tworzyć pustej tablicy, chcę ją wypełnić tylko nie wiem jak. Narazie ustawiłem tylko length, ale nie wiem co dalej :(. Nie wiem jak wypełnić te obiekty właściwościami oraz przypisanymi do nich wartościami z pliku JSON.

---

Przecież podałem Ci kilka przykładów jak utworzyć tablicę, która będzie zawierać nazwy wszystkich piłkarzy z drużyn. Jeśli struktura wyjściowa Ci nie odpowiada, to pokaż jakiej oczekujesz.

---

Chciałbym wypełnić tablice obiektami z których każdy zawiera dwie właściwości. Nie tylko "name", ale jeszcze jedną.

---

W trakcie mapowania możesz dodać wiele właściwości. Pokaż proszę jak ma wyglądać wyjściowa struktura danych, bo chyba nie rozumiem o co Ci konkretnie chodzi.

---

const playerArray = [
    {
        name: "zawodnik",
        image: "ścieżka do obrazka"
    },
    {
        name: "zawodnik",
        image: "ścieżka do obrazka"
    },
    {
        name: "zawodnik",
        image: "ścieżka do obrazka"
    },
    {
        name: "zawodnik",
        image: "ścieżka do obrazka"
    },
    {
        name: "zawodnik",
        image: "ścieżka do obrazka"
    },
]

właściwości które znajdują się w tych obiektach mają być pobierane z pliku JSON.

---

To wygląda jak łączenie 2 osobnych struktur danych. Będziesz musiał identyfikować, do którego obiektu zawodnika dodać którą wartość property image. Jak wygląda struktura danych zawierająca pola image?

---

JSON:

"teams": [
        {
            "team": "Arsenal",
            "players": [
                {
                    "name": "Mesut Ozil",
                    "image": "./src/assets/image/image.jpg"
                },
            ]
        }
]

 

---

Przecież to praktycznie ta sama struktura danych, którą podałeś w pytaniu. Biorąc więc przykład z pętlą for z mojej odpowiedzi i rozszerzając dodanie pola image:

const playerNames = [];
 
for (let i = 0; i < json.teams.length; i++) {
    const team = json.teams[i];
 
    for (let j = 0; j < team.players.length; j++) {
        playerNames.push({
            name: team.players[j].name,
            image: team.players[j].image
        });
    }
}

 

---

Dużo pomogłeś, dzięki za pomoc :)