CODEWITHSUNDEEP
jqueryangularjs
Shankar Kumar
Shankar Kumar

Reputation: 25

How to bind Dynamic property name or Column in AngularJs 1.0 Html expression

I am facing one problem while binding data to angularJs 1.0.

I have fetch the data from the Database via a Pivot Query with Dynamic Column name,

but I did not able to bind data to angularJs html expression ,

can any one here to suggest me how I can achieve this. my Data is look like below.

[{"5V00L":"Charcoal","T200":"No Color","GradeName":"Pre Kindergarten","GradeLevelId":10},{"5V00L":"Sapphire","T200":"Heather Grey & Red","GradeName":"Kindergarten","GradeLevelId":11},{"5V00L":"No Color","T200":"Gold & Navy","GradeName":"1st Grade","GradeLevelId":14},{"5V00L":"No Color","T200":"White & Lime Shock","GradeName":"Grade-Name","GradeLevelId":27}]

in this 5V00L and T200 is the dynamic column name. So please help me how I can bind these two column property in my angulrJs html expression Like object.GradeName

Upvotes: 1

Views: 1144

Answers (3)

TheSameSon
TheSameSon

Reputation: 369

As per ECMAScript Third Edition (pdf):

4.3.3 Object

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

which means that you can't be sure that your custom properties would have 0 and 1 indexes.

Instead of hoping that they would always be the first, a better way would be to list all properties with ng-repeat loop and hide those which are predefined.

HTML:

   <div ng-repeat="item in list">
      <div ng-repeat="(key, value) in item">
        <p ng-hide="!isCustomProperty(key)">
          <b ng-bind="key"></b>: <span ng-bind="value"></span>
        </p>
      </div>
    </div>

JS: 

var predefinedProperties = ['GradeName', 'GradeLevelId'];

$scope.isCustomProperty = function (prop) {
    return predefinedProperties.indexOf(prop) < 0;
};

Here jsfiddle with working example

UPDATE

And even a better solution would be to store your dynamic properties as an array of objects.

For example:

[{
    "GradeName":"Pre Kindergarten",
    "GradeLevelId":10,
    "Attributes": [
        {
            "key": "5V00L",
            "value": "Charcoal"
        }, {
            "key": "T200",
            "value": "No Color"
        }
    ]
}, {
    "GradeName":"Kindergarten",
    "GradeLevelId":11,
    "Attributes": [
        {
            "key": "5V00L",
            "value": "Sapphire"
        }, {
            "key": "T200",
            "value": "Heather Grey & Red"
        }
    ]
}, {
    "GradeName":"1st Grade",
    "GradeLevelId":14,
    "Attributes": [
        {
            "key": "5V00L",
            "value": "No Color"
        }, {
            "key": "T200",
            "value": "Gold & Navy"
        }
    ]
}, {
    "GradeName":"Grade-Name",
    "GradeLevelId":27,
    "Attributes": [
        {
            "key": "5V00L",
            "value": "No Color"
        }, {
            "key": "T200",
            "value": "White & Lime Shock"
        }
    ]
}];

Upvotes: 0

Shankar Kumar
Shankar Kumar

Reputation: 25

After spend 2-3 hours top resolve this I found the below way to. My list of object was:

 [{"5V00L":"Charcoal","T200":"No Color","GradeName":"Pre Kindergarten","GradeLevelId":10},{"5V00L":"Sapphire","T200":"Heather Grey & Red","GradeName":"Kindergarten","GradeLevelId":11},{"5V00L":"No Color","T200":"Gold & Navy","GradeName":"1st Grade","GradeLevelId":14},{"5V00L":"No Color","T200":"White & Lime Shock","GradeName":"Grade-Name","GradeLevelId":27}]

5V00L and T200 was two first dynamic property. Create a angular function.

  $scope.ObjectKey = function (obj) {
         return Object.keys(obj);
     }

I have used this function in my html like below:

 <div  ng-repeat="color in Colors">
                    <div style="width: 33%; float: left">
                        {{color[ObjectKey(color)[0]]}}
                    </div >

                    <div style="width: 33%; float: left">
                        {{color[ObjectKey(color)[1]]}}
                    </div>

                </div>

Upvotes: 1

Shubhranshu
Shubhranshu

Reputation: 521

var obj = { 5V00L: "Charcoal", T200: "No Color", GradeName: "Pre Kindergarten", GradeLevelId: 10};

var firstDynamicVal = obj[Object.keys(obj)[0]];
var secondDynamicVal = obj[Object.keys(obj)[1]];
console.log("First Value: "+firstDynamicVal+", Second Value: "+secondDynamicVal);

you can try this to get the first two value. But this solution will work only when the order of the property remains same.

Upvotes: 1

Related Questions