How to dynamically populate key/value pair in Angular JS?

[Selvakumar Murugesan]

I am reading the below json value from a module.js

$scope.personDetails =
        {
            "apiversion": "0.1",
            "code": 200,
            "status": "OK",   
            "mydata": {

                    "myrecords": [
                       {
                           "models": [
                              {
                                  "name": "Selva",
                                  "dob": "10/10/1981"
                              }
                           ],
                           "Address1": "ABC Street",
                           "Address2": "Apt 123",
                           "City": "NewCity1",
                           "State": "Georgia"                       
                       },

                       {
                           "models": [
                              {
                                  "name": "Kumar",
                                  "dob": "10/10/1982"
                              }
                           ],
                            "Address1": "BCD Street",
                           "Address2": "Apt 345",
                           "City": "NewCity2",
                           "State": "Ohio",
                           "Country":"USA"

                       },
                       {
                            "models": [
                              {
                                  "name": "Pranav",
                                  "dob": "10/10/1983"
                              }
                           ],
                            "Address1": "EFG Street",
                           "Address2": "Apt 678",
                           "City": "NewCity3",
                           "State": "NewYork",
                           "Country":"USA",
                           "Zipcode" :"123456"
                       }
                    ]

            }

        }

Now i am able to statically build the UX. But my each record set's key value pair count is different. So i want to build my html dynamically as per the current record set's count.Country & Zipcode is not exist in all records so i need to build dynamically the build and populate the html output. Most of the time, my json output is dynamic. Instead of persondetails, i may get the json output of a product details instead of PersonDetails. So i can't do this if validation since i am not sure about the output field names in the json. 

<div   ng-show="personDetails.mydata.myrecords.length > 0"  ng-repeat="recordSingle in personDetails.mydata.myrecords">


                 <div >

                        <span >Address1: {{recordSingle.Address1}}</span>

                          <span >Address2: {{recordSingle.Address2}}</span>
                      <span>City: {{recordSingle.City}}</span>
                       <span>State: {{recordSingle.State}}</span>
                        <span>Country: {{recordSingle.Country}}</span>
                          <span>Zipcode: {{recordSingle.Zipcode}}</span>

                      </div>

                </div>

[Sander Elias]

Hi Selva,

You mean something like this?: http://plnkr.co/edit/0xElPSdr7SZoWiBI3cd2?p=preview

If you have any questions left, don't hesitate to ask!

Regards

Sander

[Selva]

You are awesome. That is the logic i need. But i want to present my output in the attached format(Angular_Desired_Output.png). 

I want to display my output in rows.

First Row - will only display name

Second Row : next 3 columns of records

Third Row : next 3 columns  of records (if exist)

Fourth row : next 3 columns of records (if exist)

How can i dynamically create row and columns as per json properties output count.

[Selva]

Hi Sander,

I have modified your code to match my attached ui. Everything looks good except name. I want to name in the top row to occupy the entire row. but it is coming as normal column.

http://plnkr.co/edit/BxCOCFIiJGcuyGW06xrC

Can you please help.

Regards,

Selva

On Monday, November 17, 2014 8:22:14 AM UTC-6, Sander Elias wrote:

[Sander Elias]

Hi Selva,

            <div class="col-xs-12 w-xs-i" ng-switch-when='models'><h3>Name: {{value[0].name}}</h3></div>

Adapt the css to match your requirements. You can even break the normal document flow with css, and order the stuff like you want to.
Depending on your target clients, the easiest way might be using flexbox.

Regards
Sander

​

[Selva]

Thanks Sander. In the collection of json properties of 15 i just want to display 5 of them in my html, do i need to check ng-switch-when for every json property? or anyother easy way to do this?

[Sander Elias]

Hi Selva,

If you know what properties to pick, you don't have to loop over them don't you?

the code would be much simpler then.

otherwise, create an empty default, and specify only the 5 you need in a ngSwitchWhen.

Regards

Sander

[Selvakumar Murugesan]

Hi Sanders,

I couldn't figure this out :( could you please help me with the piece of code? Thanks a lot for your help in advance.

Regards,

Selva

Best Regards,
Selva
http://www.selvaonline.com
+1 470 208 9651

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/tdXu7jGHD4Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Selva,

 

I updated the plunk a bit, is that what you are looking for?

Regards

Sander

[Selvakumar Murugesan]

Hi Sanders,

I want the few json property just hide from displaying to the html but i need them for business logic how can i acheive that?  I am thinking the code like below. But still i have the scope of removed json property in my code?

<span ng-repeat="(key, value) in removeSelectedAttr(recordSingle)">

$scope.removeSelectedAttr = function(items) {
var result = {};
angular.forEach(items, function(value, key) {
    if (!value.hasOwnProperty("Address2") || !value.hasOwnProperty("Zipcode")) {
        result[key] = value;
    }
});
return result;
}

Best Regards,
Selva
http://www.selvaonline.com
+1 470 208 9651

--