如何根据 JSON 对象的属性动态填充 Angular JS 中的显示对象

How to dynamically populate display objects in Angular JS based on properties from the JSON object.?

本文关键字：对象 Angular JS 显示 填充 属性 何根 JSON 动态      更新时间：2023-09-26

我正在从模块中读取以下 json 值.js

.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"
                           }
                        ]                  
                }    
            }
}
}])

现在我能够静态构建用户体验。但是我的每个记录集的键值对计数是不同的。所以我想根据当前记录集的计数动态构建我的 html。国家和邮政编码并非存在于所有记录中，因此我需要动态构建并填充 html 输出。大多数时候，我的 json 输出是动态的。我可能会获得产品详细信息而不是 PersonDetails，而不是 personDetails。

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

一种方法是使用ng-if语句，用于可选的span元素：

<span ng-if="recordSingle.Address1">Address1: {{recordSingle.Address1}}</span>

[更新#1：根据对问题的修订评论进行了更新]

[更新#2：修复了功能中的拼写错误并包含plunkr]

我现在明白您希望根据 JSON 对象的属性动态构建显示对象。在这种情况下，我将循环访问对象的属性。我将使用一个函数为每个对象生成此属性数组，以便您可以过滤掉任何原型链。我还会删除任何不需要的提议，例如内部$$hashKey，也许还有数组对象，例如

在控制器中：

$scope.getPropertyNames = getPropertyNames;
function getPropertyNames(obj) {
  var props = [];
  for (var key in obj) {
    if (obj.hasOwnProperty(key) && !angular.isArray(obj[key]) && key !== '$$hashKey') {
      props.push(key);
    }
  }
  return props;
}

然后在您的 HTML 视图中：

<div ng-repeat="record in personDetails.mydata.myrecords">
  <div ng-repeat="prop in getPropertyNames(record)">
    <span ng-bind="prop"></span>: <span ng-bind="record[prop]"></span>
  </div>
</div>

这对我有用...看到这个普伦克。它动态显示数组中对象的每个属性（对象中可以有任何属性）。这不是你想要实现的目标吗？

相关文章：