代码之家 › 专栏 › 技术社区 › Yeeooow

迭代时设置对象的属性

vue.js jquery javascript

Yeeooow · 技术社区 · 6 年前

我正在用Laravel(后端)和Vue.js制作SPA。我有以下数组:

访问数组:

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

访问:

["BIU","Group"]

我想比较一下 access 数组到 accessArray 数组,如果有匹配项可以更改记录(在 访问数组 )并添加 true 值,否则添加 false 价值。我是在一个Vue方法中执行此操作的。

…到目前为止,我得到了:

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

它将这个输出到控制台:

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

在Vue中:

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

我希望实现的输出如下:

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

任何帮助都会非常感谢,我已经看了很多类似的问题,所以,似乎找不到任何沿着这些线。我还试图在结尾添加一个else语句,但我(认为)我正在将其转换为一个对象,这样似乎不起作用。

编辑:

foo中的数据来自laravel配置设置,因此具有一定的动态性。

Bar中的数据是从Laravel ORM(其JSON存储在文本字段中)接收的JSON。

4 回复 | 直到 6 年前

akuiper 6 年前

使用普通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)

VLAZ Sohail Arif 6 年前

你可以使用 Array#map 通过检查另一个数组中是否存在值,通过 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);

注意:当使用arrow函数并希望返回对象时,需要在 () 否则,它将被解释为代码块。

brk 6 年前

使用 reduce 在Reduce Call Back中,检查两个项目是否都存在 accessArray 和; access . 创建一个对象,并且两个数组中的项都设置 checked 对或错

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)

Naga Sai A 6 年前

为达到预期效果,使用以下选项
1。循环模糊阵列
2.删除初始if条件-“if(.inarray(value,foo)!=-1)“循环通过所有
三。对已检查的进行条件检查-已检查:$.inarray(value,bar)!==1?真:假

科迪森- 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>

选项2 :
不使用jquery和使用简单的foreach循环foo

科迪森- 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);