Фильтрация объектов javascript в массив при использовании fetch

Question

У меня есть приложение реагирования, где я использую библиотеку axios, чтобы получить некоторые значения и установить их в массив объектов javascript в моем состоянии

  componentDidMount(){
    axios.get('http://localhost:8080/zoo/api/animals')
.then(res => this.setState({animals: res.data}))
}

Теперь я хочу проверить, содержит ли объект Owner объект внутри него, и отфильтровать, что делает,

Сначала я попытался создать const, а затем с помощью фильтра проверить, содержат ли они объекты, а затем установить состояние, но я не могу сохранить свои значения в локальной переменной

  componentDidMount(){
const animals= [];
axios.get('http://localhost:8080/zoo/api/animals')
.then(res => animals=res.data)
console.log(animals) // logs empty array
console.log('mounted') 
  }

как я могу сделать так, чтобы я мог получить только животных, которые НЕ имеют предмет-хозяина внутри?

Answer 1

Ваш массив animal во втором примере пуст, потому что axios.get асинхронный, то, что находится в вашем then, будет выполнено, как только будут получены данные, но функция продолжит работать в это время.

Чтобы отфильтровать массив, просто используйте filter сразу после извлечения данных:

componentDidMount(){
    axios.get('http://localhost:8080/zoo/api/animals')
        .then(res => this.setState({animals: res.data.filter(animal => !animal.owner)}))
}

Эта функция отфильтровывает каждый объект животного, у которого нет свойства owner.

Рабочий пример:

const animals = [
	{
		name: 'Simba',
		owner: {
			some: 'stuff'
		}
	},
	{
		name: 1
	}, ,
	{
		name: 2
	}, ,
	{
		name: 3,
		owner: {
			some: 'stuff'
		}
	},
	{
		name: 'Bambi'
		//status: 'dead'
	}
]

console.log(animals.filter(animal => animal.owner))

РЕДАКТИРОВАТЬ: ответ был изменен так, что он фильтрует только животных, у которых нет владельца