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

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 :)