如何访问数组中的所有对象

Question

I am working on a project where I pull data from an API and input it into the DOM. One of the API responses returns an array of objects and I need to get the 'name' value from each of the objects and input it into the DOM here is a response example:

"languages": [{
    "iso639_1": "es",
    "iso639_2": "spa",
    "name": "Spanish",
    "nativeName": "Español"
}]

Here is my function

container.addEventListener('click', e => {
    searchFilter.innerHTML = '';
    
    const clicked = e.target.getAttribute('data-name');

    const getCountry = fetch(`https://restcountries.eu/rest/v2/name/${clicked}`)
        .then(response => response.json())
        .then((clickedCountry) => {
            clickedCountry.forEach(i => {
                container.innerHTML = '';
                detail.innerHTML += `
                    <button id="btn">Back</button>

                    <h1>${i.name}</h1>
                    <div class="detail-container">
                        <div class="dets">
                            <img src="${i.flag}">
                        </div>
                        <div class="dets">
                            <div>
                                <h3>Native Name: ${i.nativeName}</h3>
                                <h3>Population: ${i.population}</h3>
                                <h3>Region: ${i.region}</h3>
                                <h3>Sub Region: ${i.subregion}</h3>
                                <h3>Capital: ${i.capital}</h3>
                            </div>
                            <div>
                                <h3>Top Level Domain: ${i.topLevelDomain}</h3>
                                <h3>Currencies: ${i.currencies[0].name}</h3>
                                <h3>Languages: ${i.languages}</h3>
                            </div>
                        </div>
                    </div>`;
                search.innerHTML = '';
            })
        });

})

If I run this code it will return the array, if I run i.languages.name I get undefined as I first need to access the array. Is there anyway to simply return all of the object name values? I have tried to find a way to use i.languages[].name but this only returns one object and I also tried another forEach inside the function but couldn't get it to work.

Answer 1

If you want to access all the names in the languages array of objects, you need to use Array.prototype.map :

i.languages.map(language => language.name);

That will return an array of language names extracted from the array of objects. However, if you want to print it out in a human readable format, perhaps you can also do:

<h3>Languages: ${i.languages.map(language => language.name).join(', ')}</h3>