How to select partial json output and poupulate in the html using Angular JS?

Question

I am reading the below json value from a module.js and my question is exist below the json.

.controller('home.person',['$scope','$filter','personResource',function($scope,$filter,personResource) {

$scope.searchPerson = function() {

var params = $scope.search || {};

params.skip=0;
params.take =10;

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

}])

I am currently fetching the value using the below angular code. This is fetching the all the json key/value attributes which i want to do customize. In the json output i don't to fetch Address 2,Zipcode. How can i achevie this in Angular JS?

   <body ng-controller="AppController as vm">
   <h1>Hello angular {{appVm.version}}</h1>

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


      <div>

         <span ng-repeat="(key, value) in recordSingle">
            <span ng-switch='key'>
            <span ng-switch-when='models'> name: {{value[0].name}}</span>
            <span ng-switch-default>
               {{key}}: {{value}}
            </span>               
            </span>

         </span>

      </div>

   </div>


   <script src="//code.angularjs.org/1.3.2/angular.js"></script>
   <script src="script.js"></script>
</body>

SM Adnan · Accepted Answer · 2014-11-20 02:36:09Z

1

According to Człowiek Fin Śpiewak, you don't need to filter data to show them in html. But if you really want to delete some of the fields for some reasons (you know it better :) you can use native JavaScript:

var filteredMyRecords = $scope.personDetails.mydata.myrecords.map(function(e){
    delete e.Address2;
    delete e.Zipcode;
    return e;
});
$scope.personDetails.mydata.myrecords = filteredMyRecords;

answered Nov 20, 2014 at 2:36

SM Adnan

5652 silver badges10 bronze badges

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

Comments

Człowiek Fin Śpiewak · Accepted Answer · 2014-11-20 02:34:23Z

0

Just directly call.

<span ng-repeat="record in records">
      name: {{record.models.name}}
      Adress: {{record.Address1}}
      City: {{record.City}}
</span>

also in angular script

$scope.records = $scope.personDetails.myrecords;

use name: 'Mat' instead "name": "Mat" for all labels in your persondetails object.

or you need convert your json file to javascript object. angular.toJson(obj);

edited Nov 20, 2014 at 2:34

answered Nov 20, 2014 at 2:17

Człowiek Fin Śpiewak

2591 silver badge10 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:49:27Z

Try using a function that gives filtered output for the key value pair.

I think the solution that you are looking for might be same as the answer for the following post: How to filter (key, value) with ng-repeat in AngularJs?

You would be required to do something like this:

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

EDIT: Its my mistake I did not see the structure of json correctly:

In the above function inside the for each you would require another foreach to iterate over inner json.So in the current foreach remove the code and replace with code like

angular.forEach(value, function(val, k) {
        if (k=='Zipcode') {
            delete value['Zipcode'];
            result[key] = value;
        }
            else
            {
                result[key]=value
            }
    });

Also while deleting the attribute use a copy of initial json not the original one as it would modify original json as well(Only required if you need to reuse that json some where else as well). Copy could be prepared like var jsonObj=JSON.parse(JSON.stringify(json));

I think this might help. Sorry for the confusion. See if it works.

EDIT 2(Just a Suggestion): If it works you could make it generic by passing the attribute name that needs to be hidden in the function itself like

and in the javascript function use arguments object to handle variable number of arguments.

Raja, I have tried your solution. But for me the if condition always return as false and code is not executing as expected.
Edited the answer to include more details.Try if it works for you.

Collectives™ on Stack Overflow

How to select partial json output and poupulate in the html using Angular JS?

3 Answers 3

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Linked

Related