代码之家 › 专栏 › 技术社区 › D_chez12

如果对象键值为空,则过滤掉数组中的对象

filter object arrays reactjs javascript

D_chez12 · 技术社区 · 6 月前

如果特定键值为空,我需要过滤掉数组中的对象。(努力学习)

const getPlayerData = async () => {
  const allPlayers = await fetchData("https://api.sleeper.app/v1/players/nfl");
  const players = Object.keys(allPlayers).map(function(key) {
    return allPlayers[key]
  })

  const activePlayers = await Promise.all(players?.filter(async(player: any) => {player.search_rank !== null}
).sort((a, b) => a.search_rank - b.search_rank));
  
  console.log(activePlayers)
  return activePlayers;
}

它过滤如果 {player.active = true} 但我需要过滤一下 player.search_rank 是 null 也一样

2 回复 | 直到 6 月前

Dinesh 6 月前

我修改了上面的代码,假设 fetchData 函数将从API获取数据。请忽略fetchData的实现。

const fetchData = async (url) => {
    return await fetch(url).then(res => res.json())
}

const getPlayerData = async () => {
  const allPlayers = await fetchData("https://api.sleeper.app/v1/players/nfl");
  const players = Object.keys(allPlayers).map((key) => allPlayers[key]);

  const activePlayers = players
          ?.filter((player) => player.search_rank !== null) 
          .sort((a, b) => a.search_rank - b.search_rank);
  
  console.log(activePlayers)
  return activePlayers;
}

所做的更改:

修改后的行包含 const players 使用箭头函数并返回它,而无需显式编写return语句。---您可以忽略此更改。
删除不必要的 Promise.all 因为数据已经被接收,我们正在应用作为同步操作的过滤和排序函数。 async 内部也不需要 filter 回调,因为我们没有在内部执行任何异步操作 滤波器 功能。

主要问题是我们必须回去 player.search_rank !== null 该函数存在于过滤器函数中,或将其写为不带括号的箭头函数 {} .

KLASANGUI 6 月前

朋友,我对你的功能做了一些重大更改,现在它运行得很好。

const fetchData = async ( url ) => await (await fetch(url)).json();

const getPlayerData = async () =>
{
  // Gets all enumerable values directly as an array.
  const players = Object.values
  (
    await fetchData("https://api.sleeper.app/v1/players/nfl")
  );
  
  const rankedPlayers = players
    .filter
    (
      // Filters if a player is active and has a rank (not undefined or null).
      player => ( player.active && (player.search_rank != null) )
    )
    .sort
    (
      // Sorts the players by `search_rank` only.
      ( a, b ) => a.search_rank - b.search_rank
    );
  
  return rankedPlayers;
}

console.clear();
console.log('Fetching data...');
getPlayerData().then
(
  rankedPlayers => console.log
  ({
    'Number of ranked players': rankedPlayers.length,
    'First in the list':
    {
      'Parsed full name': rankedPlayers.at(0).first_name + ' ' + rankedPlayers.at(0).last_name,
      'Search rank': rankedPlayers.at(0).search_rank,
    },
    'Second in the list':
    {
      'Parsed full name': rankedPlayers.at(1).first_name + ' ' + rankedPlayers.at(1).last_name,
      'Search rank': rankedPlayers.at(1).search_rank,
    },
    'Third in the list':
    {
      'Parsed full name': rankedPlayers.at(2).first_name + ' ' + rankedPlayers.at(2).last_name,
      'Search rank': rankedPlayers.at(2).search_rank,
    },
  })
);

.as-console-wrapper { min-height: 100%; }

附言我注意到数据包含非唯一性 search_rank 价值观。所以,也许最好改变一下 .sort() 回调函数,以满足所需排序的所有条件。。。比如,如果有两个 search_rank 如果值相同,那么应该先对哪个值进行排序?在当前示例中,它们将保持不变(因此,原始数据中排序的第一个将排在第一位)。

顺便说一句,有可能使其成为单行线:

// One-liner:
const getPlayerData = async () => Object.values(await (await fetch("https://api.sleeper.app/v1/players/nfl")).json()).filter(player => ( player.active && (player.search_rank != null) )).sort(( a, b ) => a.search_rank - b.search_rank);

// TEST:
console.clear();
console.log('Fetching data...');

getPlayerData().then
(
  rankedPlayers => console.log
  ({
    'Ranked Players': rankedPlayers.length,
    'First Player': rankedPlayers.at(0),
  })
);