CODEWITHSUNDEEP
javascriptjqueryvue.js
Yeeooow
Yeeooow

Reputation: 308

Set property on object while iterating

I am making a SPA with Laravel(backend) and Vue.js. I have the following arrays:

accessArray:

["BIU","CEO","Finance","HRD","Group"]

access:

["BIU","Group"]

I want to compare the access array to the accessArray array and if there is a match to change the record (in the accessArray) and add a true value otherwise add a false value. I am doing this inside a Vue method.

... so far I got this:

var foo = ["BIU","CEO","Finance","HRD","Group"];
var bar = ["BIU","Group"];

$.each(bar, function (key, value) {
    if ($.inArray(value, foo) != -1) {
        var position = $.inArray(value, foo);
        console.log(value + ' is in the array.  In position ' + position);
        foo[position] = {name: value, checked: true};
    }
});

Which outputs this to the console:

BIU is in the array.  In position 0
Group is in the array.  In position 4

And this in Vue:

[
{"name":"BIU","checked":true},
"CEO",
"Finance",
"HRD",
{"name":"Group","checked":true}
]

The output I would like to achieve is the following:

[
{"name":"BIU","checked":true},
{"name":"CEO","checked":false},
{"name":"Finance","checked":false},
{"name":"HRD","checked":false},
{"name":"Group","checked":true}
]

Any help would be greatly appreciated, I have looked at many similar problems on SO but cant seem to find anything along these lines. I have also tried to add an else statement on the end but I (think) I'm converting it to an object so that doesn't seem to work.

Edit:

The data in foo comes from a Laravel config setting so is somewhat dynamic

The data in bar is JSON received from the Laravel ORM (its json stored in a text field)

Upvotes: 0

Views: 738

Answers (4)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result use below option
1. Loop foo array
2.Remove initial if condition - "if ($.inArray(value, foo) != -1)" to loop through all
3. Do conditional check for checked - checked: $.inArray(value, bar) !== -1 ? true : false

codepen - https://codepen.io/nagasai/pen/GXbQOw?editors=1011

  var foo = ["BIU","CEO","Finance","HRD","Group"];
    var bar = ["BIU","Group"];
    
    $.each(foo, function (key, value) {
        foo[key] = {name: value, checked: $.inArray(value, bar) !== -1 ? true : false};
    });
    
    console.log(foo);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Option 2:
Without using jquery and using simple forEach to loop through foo

codepen - https://codepen.io/nagasai/pen/YOoaNb

      var foo = ["BIU","CEO","Finance","HRD","Group"];
      var bar = ["BIU","Group"];

foo.forEach((v,i) => foo[i] = {name: v , checked : bar.includes(v)})
console.log(foo);

Upvotes: 0

VLAZ
VLAZ

Reputation: 29116

You can use Array#map to iterate over the array and construct a new one, by checking if values are present in the other one through Array#includes

const accessArray = ["BIU","CEO","Finance","HRD","Group"];
const access = [ "BIU", "Group" ];

const result = accessArray.map( a => ({ name: a, checked: access.includes(a)}) ) ;

console.log(result);

A note: when using an arrow function and you want to return an object, you need to surround the object literal in () otherwise it would be interpreted as a code block.

Upvotes: 4

akuiper
akuiper

Reputation: 215127

An option with vanilla javascript:

var foo = ["BIU","CEO","Finance","HRD","Group"];
var bar = ["BIU","Group"];

var result = foo.map(name => {
    var checked = bar.indexOf(name) !== -1
    return { name, checked }
})

console.log(result)

Upvotes: 6

brk
brk

Reputation: 50346

Use reduce and inside the reduce call back check if the item is present in both accessArray & access . Create an object and the item present in both array set the value of checked to true or false

let arr1 = ["BIU", "CEO", "Finance", "HRD", "Group"]
let arr2 = ["BIU", "Group"];

let k = arr1.reduce(function(acc, curr) {
  let obj = {}
  if (arr2.includes(curr)) {
    obj.name = curr;
    obj.checked = true
  } else {
    obj.name = curr;
    obj.checked = false
  }
  acc.push(obj);
  return acc;


}, []);

console.log(k)

Upvotes: 0

Related Questions