从具有多个数组的对象中获取新数组

Question

我从我的 API 端点返回一个非常大的对象。 它是一个具有多个数组的对象。在它们中的每一个中作为 url（例如 item.[0].images[0].url）。我想创建一个新数组，只使用 url 并将它们存储在我的 Redux 存储中。

我尝试使用过滤方法，但每次都返回相同的大数组，没有任何更改。

此外，我注意到如果我 console.log(typeof res.data.items) 我得到一个对象而不是一个数组作为输出。我很困惑，因为我的控制台也说 res.data.items 是一个数组。

这是我的 res 对象的一部分

{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {url: "/me/top/artists?limit=20&offset=11", method: "get", headers: {…}, baseURL:    "https://api.spotify.com/v1", transformRequest: Array(1), …}



data:
href: "https://api.spotify.com/v1/me/top/artists?limit=20&offset=11"
items: Array(20)
0:
external_urls: {spotify: "https://open.spotify.com/artist/0fA0VVWsXO9YnASrzqfmYu"}
followers: {href: null, total: 4774667}
genres: (3) ["hip hop", "ohio hip hop", "rap"]
href: "https://api.spotify.com/v1/artists/0fA0VVWsXO9YnASrzqfmYu"
id: "0fA0VVWsXO9YnASrzqfmYu"
images: Array(3)
     0:
         height: 640
          url: "https://i.scdn.co/image/4cb57ae1ef87546455db9cf65ba414c311ff459a"

1: {…}
2: {…}

....

这是我的职责

.then((res) => {
      ***let newdata = res.data.items.filter((url) => url.images[0].url)*** // not working

      console.log('newdata', newdata) // getting back res.data.items

      console.log(res.data.items) // Array
      console.log('res', res)
      console.log(typeof res.data.items) // Object ?
      dispatch({
        type: FETCH_TOP_25_ALBUMS,
        payload: newdata,
      })
    })

Answer 1

要创建一个新数组，您可以使用Array.map()。试试

let newdata = res.data.items.map(item => item.images[0].url)

Answer 2

.filter() 不会做你认为的那样。过滤器接受一个“谓词”，这是一个接受输入并返回true 或false 的函数。然后，它将该函数应用于每个数组元素并返回一个数组，该数组只包含谓词返回 true 的元素。

所以在

的情况下

[1, 2, 3, 4, 5].filter(item => item > 3)

你会得到[4, 5]的返回值，因为只有4和5在应用于谓词item => item > 3时返回true

在您的情况下，您的过滤器功能是res.data.items.filter((url) => url.images[0].url)。由于您的谓词只是返回 url 字段的值，因此您的谓词总是会返回 true，除非 url 字段设置为任一

1. undefined
2. null
3. “”（空字符串）

几乎可以肯定，您的任何数据都不是这种情况，因此会返回整个数组。

您要做的是获取一个数组，其中每个元素的形状为X，并将其映射到一个数组，其中每个元素的形状为Y。为此，您需要.map()

尝试以下方法：

res.data.items.map(item => item.images[0].url)

这将获取 res.data.items 数组的内容，并将每个元素替换为传入的函数的返回值（当提供该元素的值时）。