TypeScript - Cheerioオブジェクトを「ネイティブ」オブジェクトの配列にマッピングする

私は次のHTMLを持っています（異なるデータで数回繰り返されています）、これはcheerioを使って読み込んだドキュメント内にあります:

<li class="wprm-recipe-ingredient">
  <span class="wprm-recipe-ingredient-amount">1</span>
  <span class="wprm-recipe-ingredient-unit">pound</span>
  <span class="wprm-recipe-ingredient-name">extra lean ground beef</span>
</li>

これは私が意図を表現するために書いたコードです:

const $ingredients = $("li[class='wprm-recipe-ingredient']");

const ingredients = $ingredients.map((_idx, $e) => {
    const $elem = $($e);
    const amount = $elem.children('[class$="-amount"]').text();
    const unit = $elem.children('[class$="-unit"]').text();
    const name = $elem.children('[class$="-name"]').text();
    return { amount, unit, name };
}); // => [{amount, unit, name}, { ... }]

しかしそのコメントは、私が実際に得るものではなく、私が望むものを示している。

実際の型は const ingredients: Cheerio であり、私が作ろうとした形の匿名オブジェクトの配列ではありません。

$ingredients を次の形にマッピングするにはどうすればよいですか？

[{ amount: '1', unit: 'pound', name: 'extra lean ground beef' }]

Cheerioの.get()はstring[]またはCheerioElement[]のいずれかを返すことに注意してください。私が見る限り、それは私が欲しいものではありません。

編集:

これについてもう少し詳しく説明すべきだ。

私が現在行っているのは、最初に配列を作成し、その後 $ingredients.forEach(...) クロージャの最後でその配列に push することです。

回答 #1

反復可能なオブジェクトを従来の配列に展開し、その上でネイティブの .map を使います:

const cheerio = require("cheerio"); // 1.0.0-rc.12

const html = `
<li class="wprm-recipe-ingredient">
  <span class="wprm-recipe-ingredient-amount">1</span>
  <span class="wprm-recipe-ingredient-unit">pound</span>
  <span class="wprm-recipe-ingredient-name">extra lean ground beef</span>
</li>
`;

const $ = cheerio.load(html);
const result = [...$(".wprm-recipe-ingredient")].map(e => ({
  amount: $(e).find(".wprm-recipe-ingredient-amount").text(),
  unit: $(e).find(".wprm-recipe-ingredient-unit").text(),
  name: $(e).find(".wprm-recipe-ingredient-name").text(),
}));
console.log(result);

これにより：

[ { amount: '1', unit: 'pound', name: 'extra lean ground beef' } ]