如何选择部分 json 输出并使用 Angular JS 在 html 中填充？答案

【问题标题】：How to select partial json output and poupulate in the html using Angular JS?如何选择部分 json 输出并使用 Angular JS 在 html 中填充？
【发布时间】：2015-01-17 16:32:59
【问题描述】：

我正在从 module.js 读取下面的 json 值，我的问题存在于 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"
                           }
                        ]                  
                }    
            }
}

}])

我目前正在使用以下角度代码获取值。这是获取我想要自定义的所有 json 键/值属性。在 json 输出中，我不获取地址 2，邮政编码。我如何在 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>

【问题讨论】：

标签： jquery json angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

尝试使用为键值对提供过滤输出的函数。

我认为您正在寻找的解决方案可能与以下帖子的答案相同：How to filter (key, value) with ng-repeat in AngularJs?

你需要做这样的事情：

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

编辑：这是我的错误，我没有正确看到 json 的结构：

在 for each 中的上述函数中，您需要另一个 foreach 来迭代内部 json。因此，在当前 foreach 中删除代码并替换为类似代码

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

此外，在删除属性时，请使用初始 json 的副本，而不是原始 json，因为它也会修改原始 json（仅当您需要在其他地方重用该 json 时才需要）。可以像 var jsonObj=JSON.parse(JSON.stringify(json));

一样准备副本

我认为这可能会有所帮助。对困惑感到抱歉。看看它是否有效。

编辑 2（只是一个建议）：如果可行，您可以通过传递需要隐藏在函数本身中的属性名称来使其具有通用性，例如

并且在 javascript 函数中使用 arguments 对象来处理可变数量的参数。

【讨论】：

Raja，我已经尝试过您的解决方案。但对我来说，if 条件总是返回 false 并且代码没有按预期执行。
编辑了答案以包含更多详细信息。试试它是否适合您。

【解决方案2】：

根据 Człowiek Fin Śpiewak 的说法，您无需过滤数据即可在 html 中显示它们。但是如果你真的因为某些原因想删除一些字段（你知道得更好：）你可以使用原生 JavaScript：

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

【讨论】：

【解决方案3】：

直接调用即可。

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

还有角脚本

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

使用name: 'Mat' 而不是"name": "Mat" 作为您的persondetails 对象中的所有标签。

或者您需要将您的 json 文件转换为 javascript 对象。 angular.toJson(obj);

【讨论】：