APIデータを扱うためのJavaScript配列の方法.

Originally posted on my website on June 14th 2020

APIデータを使用したJavaScript Arrayメソッドの使用

この記事では、APIデータを扱うためのJavaScript Arrayメソッドのいくつかをどのように使用するかについて、あなたと共有したいと思います.これらのメソッドを使用することができます多くの多くのことがありますが、これらは私自身のユースケースからいくつかの例です.また、より多くの配列のメソッドを使用するとMDN documentation ..

配列。プロトタイプ。filter ()

The Filter メソッドは、以下に示すような特定の基準に基づいて、応答データからAPIエントリを簡単に見つけることができます.

// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const trekkies = [
  { id: 0, name: "Piccard", planet: "Earth" },
  { id: 1, name: "Spock", planet: "Vulcan" },
  { id: 2, name: "Kirk", planet: "Earth" },
  { id: 3, name: "Worf", planet: "Gault" }
];

const findTrekkiesByPlanet = planet => {
  return trekkies.filter(trekkie => trekkie.planet === planet);
};

console.log(findTrekkiesByPlanet("Earth"));
// [0: Object {id: 0 name: "Piccard" planet: "Earth"}
// 1: Object {id: 2 name: "Kirk" planet: "Earth"}]

この例では、startrek文字を持つ基本的なAPIレスポンス配列を持っています.特定の惑星からすべてのキャラクタを見つけるために、我々はFindTrekKiesBySlanetと呼ばれる新しい機能を作成します.そして、我々がエントリを望む惑星の名前である一つのパラメタを除きます.
FindTrekKieesByBlanet関数内でTrekkies配列のFilterメソッドを呼び出し、パラメーターとして単一のTrakKeyを例外とするコールバック関数を渡します.このコールバック関数は、このトレッキングが私たちの基準を満たしていない場合、またはfalseを返します.惑星値はFindTrekkiesbyPlanet関数に渡された惑星値に等しい.
例で見ることができるように、我々が地球として「地球」を通過するならば、我々はちょうどPicCardとKirkを含む新しい配列を得ます.

配列。プロトタイプ。find ()

The find Arrayメソッドを使用して、特定の条件に基づいてAPI応答内の単一のエントリを検索できます.

// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/find

const friends = [
  { id: 0, name: "joey", quote: "How you doin?" },
  { id: 1, name: "ross", quote: "We were on a break" },
  { id: 2, name: "phoebe", quote: "She’s your lobster" }
];

const findFriendById = id => {
  return friends.find(friend => friend.id === id);
};

console.log(findFriendById(0)); // Object {id: 0, name: "joey", quote: "How you doin?"}

この例では、私のすべての時間のお気に入りのCOMの友人からの文字で偽のAPI応答配列を持っています.IDで単一の文字を見つけるには、FindFriendByidという名前の新しい関数を作成します.これは、探している文字のID整数を例外とします.
この新しい関数の中で、私たちは友人の配列のFindメソッドを呼び出します.また、一度に一つの友人を例外とするコールバック関数を渡します.このコールバック関数は、我々が探している友人を攻撃したときに真の値を返す必要があります.したがって、単に現在の友人のIDをFindFriendById関数に渡されたIDと比較します.
この例では、FindFriendByIdを0として、JoeyのオブジェクトをIDとして呼び出します.

配列。from ()

From Arrayメソッドの関数は、任意のデータから新しい配列を作成することです.ここでは、API応答データをレスポンスコンポーネントに渡すことができます.

// MDN Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

const apiCategories = [
  { id: 0, title: "javascript", description: "...", other: "..." },
  { id: 1, title: "React", description: "...", other: "..." }
];

const transformApiCategories = () => {
  return Array.from(apiCategories, category => {
    return {label: category.title, value: category.id};
  });
};

console.log(transformApiCategories());
// [0: Object {label: "javascript" value: 0}
// 1: Object {label: "React" value: 1}]

// Example use in a react select component.
return (<SelectControl options={ transformApiCategories() }/>)

この最後の例では、それらに関するいくつかの情報とともにプログラミング言語を含むいくつかのランダムなAPIデータを持っています.このデータを使用して、ラベルと値を含むオブジェクトの配列を期待する要素/コンポーネントを選択します.Here is an example Gutenbergプロジェクトからのこのようなコンポーネントの.
このためにTransformapicategoriesと呼ばれる関数を作成します.この新しい関数の中で、我々は配列を使います.見つけてください、そして、我々はそれを我々のapicategories配列と各々の反復の上で一つのカテゴリーを除くコールバック機能に渡します.
私たちのコールバック関数は、正しい形式で必要なデータだけを含む各カテゴリから新しいオブジェクトを返します.Fromメソッドは、我々が選択したコンポーネントに安全に渡すことができるオブジェクトの配列を返します.

結論

これらの配列のメソッドを見ることができるので、非常に強力であり、私はあなたのドキュメントをチェックアウトすることをお勧めします.それぞれの例の中には、その特定のメソッドのdocページへのリンクのコメントがあります.そして、MDN documentation .

フォロー？

さあ、さえずりの上でここでつながってください.そうすれば、私は新しい記事と他のWordPress開発関連の資源についてあなたに通知することができます.
読書のおかげで安全に滞在.