web-dev-qa-db-fra.com

Sélectionnez une propriété dans un tableau d'objets en fonction d'une valeur: Javascript

J'ai un tableau d'objets avec la structure suivante:

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

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

console.log(result);

Je voudrais que la sortie soit:

["abc", "lmn"]

Parce que ces deux value ont checked: true.

J'ai essayé de filtrer en fonction de la valeur vérifiée:

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

J'obtiens les objets dont la valeur de propriété checked est définie sur true.

De l'aide serait appréciée.

javascriptarraysobjectecmascript-6
10
vjr12

Vous pouvez utiliser reduce avec une vérification si checked est vrai, puis Push la valeur de l'accumulateur - il n'y a pas besoin de 2 boucles:

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)

Comme indiqué par assoron , Push est plus rapide que concat, vous pouvez donc écrire cette fonction comme suit:

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

utiliser un filtre et une carte:

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

Tout d'abord, ce n'est pas un JS valide - vous devez échanger vos supports et accolades. Les tableaux utilisent [], et les objets utilisent {}, pas l'inverse.

Deuxièmement, vous devez d'abord filter sortir les objets souhaités en fonction de la propriété checked, puis utiliser map pour extraire les propriétés souhaitées:

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

Ne compliquez pas les choses. Utilisez simplement une boucle for for et enregistrez le runtime. Ce qui suit n'itérera le tableau qu'une seule fois, même si tous les éléments de votre tableau ont une propriété vérifiée true.

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)
  }
}

Si vous examinez cette implémentation interne de .map / .filter ils itéreront le tableau en utilisant une boucle while. Disons que si vous avez des données dont tous les éléments sont définis avec la valeur true, le filtre itérera sur tous les éléments une fois de plus, map les itérera pour en extraire la valeur.

3
Rajaprabhu Aravindasamy

Array.prototype.reduce() pourrait vous aider. reduce() callback prend deux arguments, dont le premier argument est la valeur d'itération ancienne/précédente et le second argument est la valeur/l'élément d'itération actuel.

Donc, en utilisant cette fonction, nous pouvons maintenir nos valeurs d'itération actuelles à la valeur d'itération précédente (valeurs totales).

La méthode Reduce () exécute une fonction de réduction (que vous fournissez) sur chaque élément du tableau, ce qui donne un seul valeur de sortie.

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

Toutes les solutions ici sont valides, mais si vous préférez une approche plus itérative avec la syntaxe ES6 +, vous pouvez explicitement chaque boucle sur vos éléments afin de rendre vos intentions super claires pour vos lecteurs (en plus, c'est plus rapide que de concaténer filter et map, car cela fait deux boucles sur votre liste):

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

Correction de la structure des données et utilisation du filtre et de la carte

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

Vous pouvez utiliser .reduce Pour essentiellement map et filter en même temps. Ci-dessous, j'ai construit un tableau accumulé en utilisant [v].slice(+!c) qui ajoutera la valeur au tableau (accumulé) si c est vrai, sinon, il ne l'ajoutera pas au tableau (comme [v].slice(+!false) renverra [], et [...[]] donnera []):

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

créer une fonction générique dans laquelle il vous suffit de passer la valeur de clé et le tableau et il filtrera le tableau sur la base des paramètres

 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  )

Il évaluera la méthode passée dans foreach pour chaque élément du tableau et vérifiera si l'élément.checked est vrai, il poussera element.value dans le tableau a qui est la sortie souhaitée.

1
Tuhin Das

En utilisant la fonction de carte et de filtre comme ci-dessous:

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

Vous ne poussez pas la valeur dans le nouveau tableau. Essayez cela, cela fonctionne correctement.

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