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?

This is invalid: [{Online & Open Alarms:{hideDashboard1... — StudioTime
– StudioTime, Commented May 24, 2018 at 11:07
It's true that dashArray as shown is invalid, but the desired goal seems clear to me, it's just a notational issue... (I hope.) — T.J. Crowder
– T.J. Crowder, Commented May 24, 2018 at 11:11
FWIW, a lot of programming is paying attention to details. So for instance, not using $scope.headArray in one place but $scope.headingArray in another, being sure not to leave out operators ('closeDashboard'(i+1)), etc. — T.J. Crowder
– T.J. Crowder, Commented May 24, 2018 at 11:17

Raeesaa · Accepted Answer · 2018-05-24 11:20:07Z

4

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

answered May 24, 2018 at 11:20

Raeesaa

3,3262 gold badges24 silver badges46 bronze badges

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

Comments

Jay · Accepted Answer · 2018-05-24 11:41:47Z

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

How is this not just a subset of my earlier answer, but without any explanation?

T.J. Crowder · Accepted Answer · 2018-05-24 11:37:48Z

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.

Collectives™ on Stack Overflow

How to push json into array?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related