filter array of objects and add object if condition is met

Question

This is my array

{"idSect":55, "DenumireSect":null, "idSpec":55, "denumireSpece":"Hematologie"},
{"idSect":32, "DenumireSect":null, "idSpec":27, "denumireSpece":"Dermatovenerologie"},
{"idSect":21, "DenumireSect":null, "idSpec":57, "denumireSpece":"Medicina nucleara"},
{"idSect":53, "DenumireSect":null, "idSpec":32, "denumireSpece":"Medicina naturista"},
{"idSect":null, "DenumireSect":null, "idSpec":1,  "denumireSpec":"Cardiologie"},
{"idSect":null, "DenumireSect":null, "idSpec":59, "denumireSpec":"Psihiatrie pediatrica"},

From it, I want to get a computed array which looks like this:

{"idSpec":55, "nameSpec":"Hematologie",    "leg": true},
{"idSpec":27, "nameSpec":"Dermatovenerologie",    "leg": true},
{"idSpec":57, "nameSpec":"Medicina nucleara",     "leg": true},
{"idSpec":32, "nameSpec":"Medicina naturista",    "leg": true},
{"idSpec":1,  "nameSpec":"Cardiologie",           "leg": false},
{"idSpec":59, "nameSpec":"Psihiatrie pediatrica", "leg": false},

I want the 'leg' attribute to only be true if that object's 'idSect' isn't null.

How may I do this in a computed property?

Answer 1

The only thing you would really need to do is remap your array with the values you would like, and call that in your computed property. You can use array.prototype.map() in JAvascript, the map function creates a new array by calling a function for every array element, in this case remapping our values.

Given the above array that would translate to:

var exampleArr = [{"idSect":55, "DenumireSect":null, "idSpec":55, "denumireSpece":"Hematologie"},
{"idSect":32, "DenumireSect":null, "idSpec":27, "denumireSpece":"Dermatovenerologie"},
{"idSect":21, "DenumireSect":null, "idSpec":57, "denumireSpece":"Medicina nucleara"},
{"idSect":53, "DenumireSect":null, "idSpec":32, "denumireSpece":"Medicina naturista"},
{"idSect":null, "DenumireSect":null, "idSpec":1,  "denumireSpec":"Cardiologie"},
{"idSect":null, "DenumireSect":null, "idSpec":59, "denumireSpec":"Psihiatrie pediatrica"}]

var remappedArr = exampleArr.map(x =>  ({idSpec: x.idSpec, nameSpec: x.denumireSpece , leg: Boolean(x.idSect)}) );

Which in turn will result in the following structure (not sure if by design but 'denumireSpece' misses an 'e' on some objects).

[
    { idSpec: 55, nameSpec: 'Hematologie', leg: true },
    { idSpec: 27, nameSpec: 'Dermatovenerologie', leg: true },
    { idSpec: 57, nameSpec: 'Medicina nucleara', leg: true },
    { idSpec: 32, nameSpec: 'Medicina naturista', leg: true },
    { idSpec: 1, nameSpec: undefined, leg: false },
    { idSpec: 59, nameSpec: undefined, leg: false }
  ]

The only thing left would be to create a computed property in vuejs.

computed: {
    myArray: {
      get() {
        return this.myArray.map(x => ({idSpec: x.idSpec, nameSpec: x.denumireSpece , leg: Boolean(x.idSect)}) );
      },
   }
}

Answer 2

Try this:

 const arr = [ { idSect: 55, DenumireSect: null, idSpec: 55, denumireSpece: 'Hematologie' }, { idSect: 32, DenumireSect: null, idSpec: 27, denumireSpece: 'Dermatovenerologie'}, { idSect: 21, DenumireSect: null, idSpec: 57, denumireSpece: 'Medicina nucleara' }, { idSect: 53, DenumireSect: null, idSpec: 32, denumireSpece: 'Medicina naturista'}, { idSect: null, DenumireSect: null, idSpec: 1, denumireSpece: 'Cardiologie' }, { idSect: null, DenumireSect: null, idSpec: 59, denumireSpece: 'Psihiatrie pediatrica' }, ] const newArray = arr.map(({ idSect, idSpec, denumireSpece }) => ({ idSpec, nameSpec: denumireSpece, leg: Boolean(idSect), })) console.log(newArray)

Answer 3

let arr = [
{ idSect: 55, DenumireSect: null, idSpec: 55, denumireSpece: "Hematologie" 
},
{
idSect: 32,
DenumireSect: null,
idSpec: 27,
denumireSpece: "Dermatovenerologie",
},
{
idSect: 21,
DenumireSect: null,
idSpec: 57,
denumireSpece: "Medicina nucleara",
},
{
idSect: 53,
DenumireSect: null,
idSpec: 32,
denumireSpece: "Medicina naturista",
},
{ idSect: null, DenumireSect: null, idSpec: 1, denumireSpec: "Cardiologie" 
},
{
idSect: null,
DenumireSect: null,
idSpec: 59,
denumireSpec: "Psihiatrie pediatrica",
},
];

let newArr = [];

arr.map((item) => {
 if (item.idSect !== null) {
   newArr.push({ ...item, leg: true });
 }
});

console.log(newArr);

Working example

Answer 4

I think this is what you are looking for:

<script setup>
import { computed, reactive } from 'vue'

const array1 = reactive([{"idSect":55, "DenumireSect":null, "idSpec":55, "denumireSpece":"Hematologie"},
{"idSect":32, "DenumireSect":null, "idSpec":27, "denumireSpece":"Dermatovenerologie"},
{"idSect":21, "DenumireSect":null, "idSpec":57, "denumireSpece":"Medicina nucleara"},
{"idSect":53, "DenumireSect":null, "idSpec":32, "denumireSpece":"Medicina naturista"},
{"idSect":null, "DenumireSect":null, "idSpec":1,  "denumireSpece":"Cardiologie"},
{"idSect":null, "DenumireSect":null, "idSpec":59, "denumireSpece":"Psihiatrie pediatrica"}])

const filtered = computed(() => array1.map(item => 
 item={idSpec: item.idSpec, nameSpec:item.denumireSpece, leg: item.idSect!==null}
 )
);
</script>

<template>
  <ul>
    <li v-for="(value, key, index) in array1">
          {{ value.idSect !== null }}
        </li>
  </ul>
  <pre>{{filtered}}</pre>
</template>