How to push json into array?

Question

I have an array

$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
}

and i want to create this table :

$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}}
]

I tried this :

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

but not work !

How to push data into dashArray?

Answer 1

Solution is as below:-

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

Answer 2

You're not far off at all, what you're looking for is computed properties (or just setting the property name after creating the object). You can do a computed property name by using [expression] on the left-hand side of the : in the property initializer.

I'd do it with 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;
}

Note that computed property names are new(ish) as of ES2015. Prior to ES2015, you had to create the object first, then add the properties. The body of the map callback would be:

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;

But if you don't want to use map, here's a version with minimal changes to your existing code:

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

And again, prior to ES2015, you had to create the object first, then add the properties. The body of the for loop would be:

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

---

That said, you may want to revisit your structure. Obviously it's impossible to say for sure without knowing more (which would be beyond the scope of your original question), but this structure looks like it may be more complicated than it could be.

Answer 3

You can do something like below in order to get final result:

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