如何将JSON推入数组？

Question

我有一个数组

$scope.headArray=[
  'Online & Open Alarms',
  'Sites Overview',
  'Active Alarms',
  'Hidden Alarms'
];

and i have an object:

$scope.dashboardstatus = {
  hideDashboard1:true,  closeDashboard1:false,
  hideDashboard2:true,  closeDashboard2:true,
  hideDashboard3:false, closeDashboard3:false,
  hideDashboard4:false, closeDashboard4:false
}

我想创建这个表格：

$scope.dashArray = [
 {Online & Open Alarms:{hideDashboard1:true,closeDashboard1:false}} ,
 {Sites Overview:      {hideDashboard2:true,closeDashboard2:true}},
  Actives Alarms:      {hideDashboard3:false,hideDashboard3:false},
 {Hidden Alarms:       {hideDashboard4:false,closeDashboard4}}
]

我尝试过这样做：

for (var i=0; i< $scope.headingArray.length; i++){         
    $scope.dashArray.push({$scope.headingArray[i],
   {$scope.dashboardstatus['closeDashboard'(i+1)],$scope.dashboardstatus['hideDashboard'+(i+1)]}}
);                                                                                                                                  
 }  

但是不起作用！

如何将数据推入dashArray？

- devRena

---

这是无效的：[{在线和开放警报：{hideDashboard1... - StudioTime

您的 $scope.dashArray 无效。 - Harsh Jaswal

确实，如所示的 dashArray 是无效的，但我认为期望的目标很明确，这只是一个符号问题...（希望如此。） - T.J. Crowder

就我所知，很多编程都需要注意细节。例如，在一个地方不使用$scope.headArray而在另一个地方使用$scope.headingArray，确保不遗漏运算符('closeDashboard'(i+1))等等。 - T.J. Crowder

Answer 1

您可以按照以下方式进行操作，以获得最终结果：

let headArray=['Online & Open Alarms','Sites Overview','Active Alarms','Hidden Alarms'];
let dashboardstatus = {hideDashboard1:true,closeDashboard1:false,hideDashboard2:true,closeDashboard2:true,hideDashboard3:false,closeDashboard3:false,hideDashboard4:false,closeDashboard4:false}


let result = headArray.map((element, index) => { 
  let hideKey = `hideDashboard${index+1}`;
  let closeKey = `closeDashboard${index+1}`;
  return {[element]: {
    [hideKey]:dashboardstatus[hideKey],
    [closeKey]:dashboardstatus[closeKey]
  }}
})

console.log(result);

- Raeesaa

Answer 2

以下是解决方案：

解决方案如下：

$scope.headArray = ['Online & Open Alarms', 'Sites Overview', 'Active Alarms', 'Hidden Alarms'];

$scope.dashboardstatus = {
  hideDashboard1: true,
  closeDashboard1: false,
  hideDashboard2: true,
  closeDashboard2: true,
  hideDashboard3: false,
  closeDashboard3: false,
  hideDashboard4: false,
  closeDashboard4: false
}
$scope.dashArray = [];

for (var i = 0; i < $scope.headArray.length; i++) {
  //form the child object first
  var objFirstChild = "hideDashboard" + (i + 1);
  var objSecondChild = "closeDashboard" + (i + 1);
  var childObj = {};
  childObj["hideDashboard" + (i + 1)] = $scope.dashboardstatus[objFirstChild];
  childObj["closeDashboard" + (i + 1)] = $scope.dashboardstatus[objSecondChild];
  //form the parent object and push it into array
  var parentObj = {}
  parentObj[$scope.headArray[i]] = childObj;
  $scope.dashArray.push(parentObj);
}


console.log($scope.dashArray);

Simplified way in simple JavaScript, below :-

var headArray = ['Online & Open Alarms', 'Sites Overview', 'Active Alarms', 'Hidden Alarms'];

var dashboardstatus = {
  hideDashboard1: true,
  closeDashboard1: false,
  hideDashboard2: true,
  closeDashboard2: true,
  hideDashboard3: false,
  closeDashboard3: false,
  hideDashboard4: false,
  closeDashboard4: false
}
var dashArray = [];

for (var i = 0; i < headArray.length; i++) {
  var objFirstChild = "hideDashboard" + (i + 1);
  var objSecondChild = "closeDashboard" + (i + 1);
  var childObj = {};
  childObj["hideDashboard" + (i + 1)] = dashboardstatus[objFirstChild];
  childObj["closeDashboard" + (i + 1)] = dashboardstatus[objSecondChild];
  var parentObj = {}
  parentObj[headArray[i]] = childObj;
  dashArray.push(parentObj);
}


console.log(dashArray);

- Jay

---

这怎么不仅仅是我之前回答的一个子集，但没有任何解释呢？ - T.J. Crowder

Answer 3

你说得很对，你需要的是“计算属性”（或者只是在创建对象后设置属性名）。你可以通过在属性初始化程序中的冒号左侧使用表达式中的方括号来进行计算属性名。

我会用map来实现：

const headArray=['Online & Open Alarms','Sites Overview','Active Alarms','Hidden Alarms'];

const dashboardstatus = {hideDashboard1:true,closeDashboard1:false,hideDashboard2:true,closeDashboard2:true,hideDashboard3:false,closeDashboard3:false,hideDashboard4:false,closeDashboard4:false}

const dashArray = headArray.map((name, index) => {
  const hide = "hideDashboard" + (index + 1);
  const close = "closeDashboard" + (index + 1);
  return {
    [name]: {[hide]: dashboardstatus[hide], [close]: dashboardstatus[close]}
  };
});

console.log(dashArray);

.as-console-wrapper {
  max-height: 100% !important;
}

请注意，计算属性名称是ES2015版本之后新增的。在ES2015之前，您必须先创建对象，然后再添加属性。map回调函数的主体将如下所示：

const hide = "hideDashboard" + (index + 1);
const close = "closeDashboard" + (index + 1);
const obj = {};
const value = {};
value[close] = dashboardstatus[close];
value[hide] = dashboardstatus[hide];
obj[name] = value;
return obj;

但如果你不想使用map，这里提供了一个对你现有代码进行最小更改的版本：

const headArray=['Online & Open Alarms','Sites Overview','Active Alarms','Hidden Alarms'];

const dashboardstatus = {hideDashboard1:true,closeDashboard1:false,hideDashboard2:true,closeDashboard2:true,hideDashboard3:false,closeDashboard3:false,hideDashboard4:false,closeDashboard4:false}

const dashArray = [];

// Note that you had $scope.headingArray, not $scope.headArray, but you showed
// $scope.headArray when showing the array's contents
for (var i = 0; i < headArray.length; i++) {
  const close = 'closeDashboard' + (i + 1); // <== Note the + before (i + 1) to do string
  const hide  = 'hideDashboard' + (i + 1);  // concatenation, was missing from one of yours
  dashArray.push({
    [headArray[i]]: // <== computed property name, note : not , after it
    {
      [close]: dashboardstatus[close], // <== Another computed property name
      [hide]:  dashboardstatus[hide]   // <== And another
    }
  });
}

console.log(dashArray);

.as-console-wrapper {
  max-height: 100% !important;
}

再次提醒，在ES2015之前，你需要先创建对象，然后再添加属性。 for 循环的主体如下：

const close = 'closeDashboard' + (i + 1);
const hide  = 'hideDashboard' + (i + 1);
const obj = {};
const value = {};
value[close] = dashboardstatus[close];
value[hide] = dashboardstatus[hide];
obj[headArray[i]] = value;
dashArray.push(obj);

---

话虽如此，你可能需要重新审视你的结构。显然，在不了解更多情况的情况下（这超出了你最初问题的范围），很难确定，但是这种结构似乎比它本应该的更加复杂。

- T.J. Crowder