web-dev-qa-db-ja.com

値に基づいてオブジェクトの配列からプロパティを選択します：JavaScript

次の構造を持つオブジェクトの配列があります。

var arr = [
  {
    "value": "abc",
    "checked": true
  },
  {
    "value": "xyz",
    "checked": false
  },
  {
    "value": "lmn",
    "checked": true
  }
];

let result = arr.filter(item => item.checked);

console.log(result);

出力は次のようになります。

["abc", "lmn"]

これら2つのvaluesにはchecked: true。

チェックした値に基づいてフィルターをかけてみました：

let result = arr.filter(item => item.checked);

checkedに設定されているtrueプロパティ値を持つオブジェクトを取得しています。

助けていただければ幸いです。

javascriptarraysobjectecmascript-6
10
vjr12

reduceは、checkedがtrueであるかどうかをチェックして使用できます。次に、アキュムレータへの値をPushにします。2つのループは必要ありません。

const arr = [{"value": "abc","checked": true},{"value": "xyz","checked": false},{"value": "lmn","checked": true}]
const filtered = arr.reduce((a, o) => o.checked ? a.concat(o.value) : a, [])
  
console.log(filtered)

assoron で指摘されているように、Pushはconcatより高速であるため、その関数は次のように記述できます。

const arr = [{"value": "abc","checked": true},{"value": "xyz","checked": false},{"value": "lmn","checked": true}]
const filtered = arr.reduce((a, o) => (o.checked && a.Push(o.value), a), [])
  
console.log(filtered)
10
Kobe

フィルターとマップを使用します。

const arr =[{"value":"abc","checked":true},{"value":"xyz","checked":false},{"value":"lmn","checked":true}];

 const result = arr.filter(res=>res.checked).map(ele=>ele.value);
 
 console.log(result);
8
Ghoul Ahmed

まず、これは有効なJSではありません。角括弧と中括弧を交換する必要があります。配列は[]を使用し、オブジェクトは{}を使用します。その逆はありません。

次に、最初にfilterプロパティに基づいて必要なオブジェクトをcheckedから取り出し、次にmapを使用して必要なプロパティを抽出する必要があります。

const arr =[{"value":"abc","checked":true},{"value":"xyz","checked":false},{"value":"lmn","checked":true}];

const res = arr.filter(({ checked }) => checked).map(({ value }) => value);

console.log(res);
5
Jack Bashford

物事を複雑にしないでください。単純なforループを使用して、ランタイムを保存するだけです。次の例では、配列のすべての要素にチェック済みプロパティtrueがある場合でも、配列を1回だけ繰り返します。

var arr = [{
 "value": "abc",
 "checked": true
}, {
 "value": "xyz",
 "checked": false
}, {
 "value": "lmn",
 "checked": true
}];

var results = [];
for(var i=0; i<arr.length-1; i++) {
  if(arr[i].checked === true){
    results.Push(arr[i].value)
  }
}

この内部実装 .map / .filter 彼らは、whileループを使用して配列を反復します。すべての要素がtrueに設定されているデータがある場合、filterがすべての要素を繰り返し処理し、mapがそれらを繰り返し処理して値を取得します。

3
Rajaprabhu Aravindasamy

Array.prototype.reduce()が役立つかもしれません。 reduce()コールバックは2つの引数を取ります。最初の引数は古い/以前の反復値で、2番目の引数は現在の反復値/要素です。

したがって、この関数を使用して、現在の反復値を前の反復値（合計値）に保持できます。

reduce（） メソッドは、配列の各要素に対して（指定した）レデューサー関数を実行し、単一の出力値を生成します。

var arr = [{"value": "abc","checked": true},{"value": "xyz","checked": false},{"value": "lmn","checked": true}]

const result = arr.reduce((acc, cur) => ((cur.checked && acc.Push(cur.value)), acc), [])
console.log(result)
3
MH2K9

ここでのすべてのソリューションは有効ですが、ES6 +構文を使用したより反復的なアプローチを好む場合は、意図を超明確にするためにアイテムを明示的にループすることができます（さらに、filterとmapを連結するよりも高速です）リストを2回ループします）：

const items = [
  {
    "value": "abc",
    "checked": true
  },
  {
    "value": "xyz",
    "checked": false
  },
  {
    "value": "lmn",
    "checked": true
  }
];

const formattedListOfFilteredItems = [];
for (item of items) {
  if (item.checked)
    formattedListOfFilteredItems.Push(item.value);
}

console.log(formattedListOfFilteredItems);
2
Luca T

データ構造を修正し、フィルターとマップを使用する

var obj = [  
            {
                "value" : "abc",
                "checked" : true
            },
            {
                "value" : "xyz",
                "checked" : false
            },
            {
                "value" : "lmn",
                "checked" : true
            }
           ]
console.log(obj.filter(function(e){return e.checked==true}).map(function(e){return e.value}))
2
ellipsis

_.reduce_を使用すると、基本的にmapとfilterを同時に使用できます。以下では、cがtrueの場合に（累積）配列に値を追加する[v].slice(+!c)を使用して累積配列を作成しました。それ以外の場合は、配列に追加しません（[v].slice(+!false)は_[]_を返し、_[...[]]_は_[]_）を返します：

_const arr = [{
 "value": "abc",
 "checked": true
}, {
 "value": "xyz",
 "checked": false
}, {
 "value": "lmn",
 "checked": true
}];

const res = arr.reduce((a, {value:v, checked:c}) => [...a, ...[v].slice(+!c)], []);
console.log(res);_
2
Nick Parsons

キーの値と配列を渡すだけで、パラメーターの基本的な配列を除外する汎用関数を作成します

 var arr = [
          {
            "value": "abc",
            "checked": true
          },
          {
            "value": "xyz",
            "checked": false
          },
          {
            "value": "lmn",
            "checked": true
          }
        ]


            function filterList(keyValue, list) {
                let filteredList = [];
                for(let i = 0; i < list.length; i++) {
                    if(list[i]["checked"] === keyValue) {
                        filteredList.Push(list[i]["value"]);
                    }
                }
                return filteredList;
            }

    console.log(filterList(true, arr));
2
Saurabh Yadav
var a = [];
arr.forEach( (i)=> i.checked ? a.Push(i.value) :null  )

配列の各要素に対してforeachで渡されたメソッドを評価し、element.checkedがtrueかどうかを確認します。目的の出力である配列aのelement.valueをプッシュします。

1
Tuhin Das

以下のようにマップとフィルター機能を使用する：

var arr = [ {
  "value": "abc",
  "checked": true
},
{
  "value": "xyz",
  "checked": false
},
{
  "value": "lmn",
  "checked": true
}]


let checkedValues = arr.map((item) => item.checked ? item.value : null).filter(item => item);

console.log(checkedValues);
1
Hardik Shah

新しい配列の値をプッシュしていません。正しく機能していることを試してください。

const arr = [{ "value": "abc", "checked": true }, { "value": "xyz", "checked": false }, { "value": "lmn", "checked": true }]
let result = []
let check = arr.filter((val) => {
    if (val.checked) {
        result.Push(val.value)
    }
})
console.log(result);
0
Fahad Ahmed