unable to add functions and json object as values to json object properities in Angular js application

Question

I have the following json array of object.

$scope.headerColumns = [{
    "label": "ABC",
    "order": 1,
    "type": "dropbox"

}, {
    "label": "XYZ",
    "order": 2,
    "group": "GroupB",
    "type": "textbox"
}]

Now I need to add few more properties to these json objects to contain the following additional information.

{
    headerName: "Businesses",
    field: "business",
    cellStyle: {
        'text-align': 'center'
    },
    headerCellRenderer: function(params) {
        params.$scope.businessItems = _self.businessItems;
        return '<span>Businesses</span></br><dropdown-select values=\'businessItems\'></dropdown-select> '
    }
}

So I am iterating my json array and adding the new properties as shown below:

angular.forEach($scope.headerColumns, function(eachHeaderColumn) {
    eachHeaderColumn["headerName"] = eachHeaderColumn.label;
    eachHeaderColumn["field"] = "busDesc";
    eachHeaderColumn["id"] = "busNum";     
    $scope.formattedheaderColumns.push(eachHeaderColumn);

});

Till here it is fine, now I stuck up, not knowing how to add cellStyle and headerCellRenderer for each json object in the above angular.forEach loop. Can any one help me please in this?

After formatting my final Json should as shown below :

$scope.formattedHeaderColumns = [{
    label: "ABC",
    order: 1,
    type: "dropbox",
    headerName: "ABC", //mapped to label
    field: "busDesc", //if order ==1, then field would be "busDesc"
    cellStyle: {
        'text-align': 'center'
    },
    headerCellRenderer: function(params) { //if  type == dropbox, we have function to return the dropdown
        params.$scope.businessItems = _self.businessItems;
        return '<span>Businesses</span></br><dropdown-select values=\'businessItems\'></dropdown-select> '

    }

}, {
    label: "XYZ",
    order: 2,
    group: "GroupB",
    headerGroup: 'GroupB', //header group should be mapped to group, if group is present
    type: "textbox",
    headerName: "XYZ", //mapped to label
    field: "busEntry", //if order ==2, then field would be "busEntry"
    cellStyle: {
        'text-align': 'center'
    },
    headerCellRenderer: function(params) { //if  type == textbox, we have function to return the input box with type = text
        return '<span>XYZ</span></br><input class="exp-param-header-input"  type="text" value=' + params.value + '> </br> <span> <span class="glyphicon glyphicon-download"></span> Apply To All</span>'

    }

}]

That's not JSON. Those are just arrays (of objects) and objects. — Andreas
– Andreas, Commented Oct 17, 2015 at 8:38
As you are manipulating the DOM I suggest you review your code - as this is better suited to a directive in angular as the approach you are using is not best practice. — markyph
– markyph, Commented Oct 17, 2015 at 8:41
amoeba, I have edited my question with the expected output format. — Madasu K
– Madasu K, Commented Oct 17, 2015 at 9:35

mr100 · Accepted Answer · 2015-10-17 10:20:43Z

Generally adding cellStyle and headerCellRenderer is no different than other properties. What is more problematic is setting proper headerCellRenderer function depending on the data. I would suggest that you first prepare a function to generate proper headerCellRenderer function for proper data:

function getHeaderCellRendered(data){
    if(data.type == "dropbox"){
        return function(params) {
            params.$scope.businessItems = _self.businessItems;
            return '<span>Businesses</span></br><dropdown-select values=\'businessItems\'></dropdown-select> ';
        }
    }
    if(data.type == "textbox"){
        return function(params) {
            params.$scope.businessItems = _self.businessItems;
            return return '<span>' + data.headerName + '</span></br><input class="exp-param-header-input"  type="text" value=' + params.value + '> </br> <span> <span class="glyphicon glyphicon-download"></span> Apply To All</span>';
        }
    }
}

and then use it within forEach:

angular.forEach($scope.headerColumns, function(eachHeaderColumn) {
    eachHeaderColumn["headerName"] = eachHeaderColumn.label;
    eachHeaderColumn["field"] = "busDesc";
    eachHeaderColumn["id"] = "busNum";   
    eachHeaderColumn["cellStyle"] = {
        'text-align': 'center'
    };     
    eachHeaderColumn["headerCellRenderer"] = getHeaderCellRendered(data);     
    $scope.formattedheaderColumns.push(eachHeaderColumn);
});

Alternatively to use [] operator to add new properties to object you may use javascript object inheritance:

angular.forEach($scope.headerColumns, function(eachHeaderColumn) {
    eachHeaderColumn.__proto__ = { 
        headerName: eachHeaderColumn.label,
        field: "busDesc",
        id: "busNum", 
        cellStyle: {
            'text-align': 'center'
        },     
        headerCellRenderer: getHeaderCellRendered(data)
    };     
    $scope.formattedheaderColumns.push(eachHeaderColumn);
});

Collectives™ on Stack Overflow

unable to add functions and json object as values to json object properities in Angular js application

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related