迭代對象數組並僅獲取特定鍵以在反應 js 中形成 object 的新數組

Question

我有以下 object。 我想對其進行迭代，並且只需要獲取鍵的能力值和值鍵。

var object = [{
    ability: "Strong",
    name: "STRENGTH",
    value: "customer has 10 properties",
    type: "MultiChoice"
  },
  {
    ability: "Good",
    name: "STRENGTH",
    value: "customer has 5 properties",
    type: "MultiChoice"
  },
  {
    ability: "average",
    name: "STRENGTH",
    value: "customer has 3 properties",
    type: "MultiChoice"
  }
]

所以我預期的 output 應該如下所示。

[{
    ability: "Strong"
    value: "customer has 10 properties"
  },
  {
    ability: "Good"
    value: "customer has 5 properties"
  },
  {
    ability: "average"
    value: "customer has 3 properties"
  }
]

然后我再次想使用上面的 object 對其進行迭代並將其值綁定到下拉列表。 所以我的下拉菜單將向最終用戶顯示“價值”，而數據庫將具有“能力”。 我正在嘗試下面的代碼片段，但它沒有給出預期的 output。 我在這里做錯了什么。

 var object = [{ ability: "Strong", name: "STRENGTH", value: "customer has 10 properties", type: "MultiChoice" }, { ability: "Good", name: "STRENGTH", value: "customer has 5 properties", type: "MultiChoice" }, { ability: "average", name: "STRENGTH", value: "customer has 3 properties", type: "MultiChoice" } ] let multiChoiceResult = []; let ability, value Object.entries(object).map(([key, value]) => { ability = value.ability; value = value.value; multiChoiceResult.push(ability, value); }); console.log(multiChoiceResult);

Answer 1

您的解決方案需要 object 作為輸入。 但是object實際上是一個數組。 您可以在給定的項目上簡單地使用map function，如下所示：

 var object = [ { ability: "Strong", name: "STRENGTH", value: "customer has 10 properties", type: "MultiChoice" }, { ability: "Good", name: "STRENGTH", value: "customer has 5 properties", type: "MultiChoice" }, { ability: "average", name: "STRENGTH", value: "customer has 3 properties", type: "MultiChoice" } ]; console.log( object.map((item) => ({ ability: item.ability, value: item.value })) )

Answer 2

與您的代碼片段一樣，它是一個對象數組。 因此，您可以使用 map function 對其進行迭代。

object.map((item) => ({ ability: item.ability, value: item.value }));

Answer 3

map 可以大大簡化

https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand

 var object = [{ ability: "Strong", name: "STRENGTH", value: "customer has 10 properties", type: "MultiChoice" }, { ability: "Good", name: "STRENGTH", value: "customer has 5 properties", type: "MultiChoice" }, { ability: "average", name: "STRENGTH", value: "customer has 3 properties", type: "MultiChoice" }] let multiChoiceResult = Object.values(object).map(({ability, value}) => ({ability, value})); console.log(multiChoiceResult);

對於下拉，你可以做

 var object = [{ ability: "Strong", name: "STRENGTH", value: "customer has 10 properties", type: "MultiChoice" }, { ability: "Good", name: "STRENGTH", value: "customer has 5 properties", type: "MultiChoice" }, { ability: "average", name: "STRENGTH", value: "customer has 3 properties", type: "MultiChoice" }] let multiChoiceResult = Object.values(object).map(({ability, value}) => `<option value="${ability}">${value}</option>`); document.getElementById("abilities").innerHTML+=multiChoiceResult.join("")

 <select id="abilities" name="abilities"> <option value="">Please select</option> </select>