отображать несколько массивов и возвращать только определенные c единиц

Question

В настоящее время у меня есть топор ios запрос на получение, который выбирает данные из API-интерфейса nasa и возвращает их в список массивов.

getDataHandler= () => {
  axios.get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY',)
  .then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data && close_approach_data.length
          ? close_approach_data.map(({ orbiting_body }) => orbiting_body)
          : ["no orbited planet"] // If the array doesn't exist, just use an empty array.

        return [
          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches[0]
        ]
      })
    })

Возвращает список массивов, которые выглядят следующим образом:

0: (4) ["21277 (1996 TO5)", 1.6016033798, 3.5812940302, "Mars"]
1: (4) ["162038 (1996 DH)", 1.2721987854, 2.844722965, "no orbited planet"]
2: (4) ["189058 (2000 UT16)", 1.332155667, 2.978790628, "Earth"]
3: (4) ["276274 (2002 SS41)", 0.9650614696, 2.1579430484, "Earth"]
4: (4) ["322913 (2002 CM1)", 1.214940408, 2.7166893409, "Jupiter"]
5: (4) ["435730 (2008 UK90)", 0.4411182, 0.9863702813, "no orbited planet"]

Затем он получает список и setState его.

Проблема в том, что у меня есть меню dropDown, чтобы показывать данные только с определенных c планет. Поэтому мне было интересно, можно ли отобразить его снова и оставить только те, которые равны текущему выбранному pl anet. И если никакие планеты не выбраны, верните их все.

код, который у меня есть на данный момент

     class MainPage extends Component {

state = {
    data: [['name', 'min estimated diameter', 'max estimated diameter', { role: "planet" }]],


    dropDownOptions: [    
                        { value: 'all', label: 'All' },
                        { value: 'earth', label: 'Earth' },
                        { value: 'mars', label: 'Mars' },
                        { value: 'mercury', label: 'Mercury' },
                        { value: 'venus', label: 'Venus' },
                        { value: 'saturn', label: 'Saturn' },
                        { value: 'jupiter', label: 'Jupiter' },
                        { value: 'no orbited planet', label: 'No orbited planet'}
                    ],
    SelectedDropDownOption: { value: 'all', label: 'All' },

}

 componentDidMount() {

  this.getDataHandler()
 }


  getDataHandler= () => {
  axios.get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY',)
.then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data && 
     close_approach_data.length
      ? close_approach_data.map(({ orbiting_body }) => orbiting_body)
      : ["no orbited planet"] 

        return [

          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches[0]
        ]
      } 
    )

    const joined = this.state.data.concat(restructuredData)

    this.setState({ data: joined })
  })
.catch(function (error) {
  console.log(error);
})
}


DropDownChangeHandler= (SelectedDropDownOption) => {
console.log("hello")
this.setState({SelectedDropDownOption});
 }

render () {

    console.log(this.state.data)
    console.log(this.state.SelectedDropDownOption)
    console.log(this.state.SelectedDropDownOption.value)
   return (
    <React.Fragment>
        <DropDown options={this.state.dropDownOptions} onChange={this.getPlanetInformation}/>
        <Chart chartData={this.state.data} />
    </React.Fragment>
    );
}
}

экспорт по умолчанию MainPage;

Answer 1

Вы можете использовать filter метод для достижения своей цели. Вы l oop над каждым подмассивом и сохраняете только те, которые включают в себя обязательное имя pl anet, переданное в качестве параметра функции.

const arrayList = [["21277 (1996 TO5)", 1.6016033798, 3.5812940302, "Mars"], ["162038 (1996 DH)", 1.2721987854, 2.844722965, "no orbited planet"], ["189058 (2000 UT16)", 1.332155667, 2.978790628, "Earth"],["276274 (2002 SS41)", 0.9650614696, 2.1579430484, "Earth"], ["322913 (2002 CM1)", 1.214940408, 2.7166893409, "Jupiter"]]

const getPlanetInformation = (planet) => {
  const information = arrayList.filter(item => item.includes(planet))
  console.log(information)
  return information.length ? information : arrayList
}

Если в вашем раскрывающемся списке не выбрано pl anet или выбранное не существует в вашем массиве, вы можете просто вернуть начальное значение.