Seleccione una propiedad de una matriz de objetos basada en un valor: Javascript

arrays object

Question

Tengo una matriz de objetos con la siguiente estructura:

var arr = [
{
"value": "abc",
"checked": true
},
{
"value": "xyz",
"checked": false
},
{
"value": "lmn",
"checked": true
}
];
let result = arr.filter(item => item.checked);
console.log(result);

Me gustaría que la salida sea:

["abc", "lmn"] 

Porque esos dos value han checked: true .

He intentado filtrar según el valor verificado:

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

Estoy obteniendo los objetos que han checked valor de la propiedad que se establece en true .

La ayuda sería apreciada

Answer 1

Arregle la estructura de datos y use el filtro y el mapa

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

Answer 2

En primer lugar, eso no es JS válido: debe cambiar sus corchetes y llaves. Las matrices usan [] , y los objetos usan {} , no al revés.

En segundo lugar, primero debe filter los objetos deseados en función de la propiedad checked , luego usar map para extraer las propiedades que desee:

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

Answer 3

No compliques las cosas. Simplemente use un bucle simple para y guarde el tiempo de ejecución. Lo siguiente repetirá la matriz solo una vez, incluso si tiene todos los elementos en su matriz, tiene una propiedad marcada como 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 observa esta implementación interna de .map / .filter , .filter la matriz utilizando un ciclo while. Supongamos que si tiene datos que tienen todos los elementos configurados con verdadero verificado, el filtro iterará sobre todos los elementos una y otra vez, el mapa iterará sobre ellos para obtener el valor.

Answer 4

No está presionando el valor en la nueva matriz. Prueba esto, está funcionando correctamente.

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

Answer 5

Puede usar .reduce para map y filter esencialmente al mismo tiempo. A continuación, he creado una matriz acumulada usando [v].slice(+!c) que agregará el valor a la matriz (acumulada) si c es verdadero, de lo contrario, no lo agregará a la matriz (como [v].slice(+!false) devolverá [] , y [...[]] dará [] ):

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

Answer 6

Puede usar reduce con una marca de verificación si checked es verdadero, luego push el valor al acumulador; no hay necesidad de 2 bucles:

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

Como señaló assoron , push es más rápido que concat , por lo que podría escribir esa función de la siguiente manera:

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

Answer 7

Todas las soluciones aquí son válidas, pero si prefiere un enfoque más iterativo con la sintaxis ES6 +, puede explícitamente cada bucle sobre sus elementos para que sus intenciones sean muy claras para sus lectores (además, es más rápido que concatenar filter y map , como que recorre su lista dos veces):

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

Answer 8

Usando la función de mapa y filtro de la siguiente manera:

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

Answer 9

crea una función genérica en la que solo necesitas pasar el valor clave y la matriz y filtrará la matriz en función de los parámetros básicos

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

Answer 10

usar filtro y mapa:

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

Answer 11

Array.prototype.reduce() podría ayudarte. reduce() devolución de llamada reduce() toma dos argumentos, el primer argumento de quién es el valor de iteración anterior / anterior y el segundo argumento es el valor / elemento de iteración actual.

Entonces, usando esta función podemos mantener nuestros valores de iteración actuales al valor de iteración anterior (valores totales).

El método reduce() ejecuta una función reductora (que usted proporciona) en cada elemento de la matriz, lo que da como resultado un único valor de salida.

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)

Answer 12

var a = [];
arr.forEach( (i)=> i.checked ? a.push(i.value) :null )

Evaluará el método pasado en foreach para cada elemento de la matriz y verificará si element.checked es verdadero, empujará el element.value en la matriz a, que es la salida deseada.