获取newsApi时如何删除Array中的重复对象

Question

您好，我在根据用户选择获取特定信息时遇到了一些问题。我想获取 newsAPI ，数组里面有包含国家的对象。用户通过使用下拉菜单选择他想要的国家，但是当我使用 map() 时有一个迭代国家它传递给所有有重复的国家，我试图删除重复的，但它没有用 + 我使用了 reduce() 但它也没有用。有什么提示和建议吗，也许我漏掉了什么。

html:

<html>
 <div class="ui container" id="seachCountry"></div>
</html>

脚本：

    <script>
    const apikey = 'https://newsapi.org/v2/top-headlines/sources?category=sports&apiKey=b23fd6aac9c44682abb9580dae85d23f';
        async function getNews(){
            const response = await fetch(apikey);
            const data = await response.json();
            printCards(data)
        }
    
         function printCards(data) {
             const header = document.querySelector('#seachCountry');
                 //Inside  "header.innerHTMI",  I put map() function to pass all items but I couldn't prevent duplicates
                 header.innerHTML += `
                         <select class='ui fluid selection dropdown select' onchange="getCountry(this.value)">
                         <option>select the country</option>
                         ${data.sources.map( countryName => `<option>${countryName.country}</option>`)}
                         </select>`
                         // print all country name using map and dispaly it to user in dropdown WIHT deplicate country name
                     }
    
         async function getCountry(e){
             if ( e !== 'select the country'){
                //Another Fetch based on user choice
                const response = await fetch(`${apikey}&country=${e}`)
                const data = await response.json();
                console.log(data.sources)
    
    
                //It only shows the information of the country in which the user is interested
                document.getElementById("output").innerHTML =  data.sources.map(countryName =>
                    `<div class="ui container card">
                        <div class="content">
                            <h4 class="header">${countryName.name}</h4>
                        </div>
                        <div class="content">
                            <div class="desc">${countryName.description}</div>
                        </div>  
                        <div class="extra content">
                            <span>
                                <a href=${countryName.url} target="_blank" class="ui button btn">Read more</a>
                            </span>
                        </div>
                        </div>`)
             }
        }
        getNews()  
    </script>

Look at this Picture to Clarify the Problem

Answer 1

您可以使用此函数过滤数组以仅包含不同的值：

source.filter((item, index) => source.indexOf(item) === index);

因此，在您的情况下，您要映射到 option 的列表，它将是这样的：

function printCards(data) {
        const header = document.querySelector('#seachCountry');
        const countries = data.sources.map(cn => cn.country);
        const distinctCountries = countries.filter((country, index) => countries.indexOf(country) === index);

        header.innerHTML += `
                        <select class='ui fluid selection dropdown select' onchange="getCountry(this.value)">
                        <option>select the country</option>
                        ${distinctCountries.map(country => `<option>${country}</option>`)}
                        </select>`;
}

获取newsApi时如何删除Array中的重复对象

How can I delete the duplicate objects inside Array when I fetch newsApi

javascript

api

json

object

dropdown