Set property on object while iterating

Question

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)

akuiper · Accepted Answer · 2018-09-25 14:30:54Z

6

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)

answered Sep 25, 2018 at 14:30

akuiper

216k33 gold badges363 silver badges380 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bennett Dams Over a year ago

Why does return { name, checked } results in an entry with key and value pair? Can you hint to the documentation related to this?

VLAZ Over a year ago

@BennettDams it's an ES6 shorthand with object initialisation - it's to reduce the repetition when having to write something like {id: id, name: name} and similar.

VLAZ · Accepted Answer · 2018-09-25 14:34:21Z

4

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.

answered Sep 25, 2018 at 14:34

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

Comments

brk · Accepted Answer · 2018-09-25 14:29:19Z

0

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)

answered Sep 25, 2018 at 14:29

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Naga Sai A · Accepted Answer · 2018-09-25 14:57:15Z

0

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

edited Sep 25, 2018 at 14:57

answered Sep 25, 2018 at 14:30

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

4 Comments

Konrad Kalemba Over a year ago

There is really no need for jQuery. Using it for such simple task is an overkill. You can use vanilla JS function Array.forEach.

Naga Sai A Over a year ago

yes @KonradKalemba, just correcting the logic which SO has used , simple map or forEach works in this case. SO can use this if jquery is used at other places in his application and jquery is also tagged in this question :)

Naga Sai A Over a year ago

@KonradKalemba, added option 2 using forEach for loop and without using jquery

Konrad Kalemba Over a year ago

Ahh, my bad. I didn't see jQuery tag.

Collectives™ on Stack Overflow

Set property on object while iterating

4 Answers 4

2 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related