Question

我正在开展一个有角度的项目。我有一个场景，我需要在应用程序的页面中列出一些细节。我在页面中有一个服务调用，它返回以下json结构。我想循环遍历这个json结构，列出响应中的一些数据。

[
  {
    "ProductDetails": [
      {
        "ProductType": "Application1",
        "Name": "Product1",
        "New": false,
        "Category": "product",
        "Country": "India",
        "description": "Description for Product1",
        "Favourite": false,
        "settings": {
          "WebsiteFlag": true,
          "SmsFlag": false,
          "EmailFlag": true
        }
      }
    ]
  },
  {
    "ProductDetails": [
      {
        "ProductType": "Application2",
        "Name": "Product2",
        "New": true,
        "Category": "product",
        "Country": "India",
        "description": "Description for Product2",
        "Favourite": true,
        "settings": {
          "WebsiteFlag": false,
          "SmsFlag": false,
          "EmailFlag": true
        }
      }
    ]
  }
]

JS

            $ctrl.getSettings = function () {
                var url = "http://localhost:3000/json/settings-updated.json";
                rsicontext.getData(url).then(function (response) {
                    $ctrl.Settings = response.data;
                });
            }

HTML

        <tbody>
        <tr data-ng-repeat="app in $ctrl.Settings" class="content-box">
        <td data-ng-bind="app.ProductDetails.ProductType"></td>
        <td data-ng-bind="app.ProductDetails.Name"></td>
        <td><ng-checkbox data-checked="app.SmsFlag" rounded="true"></ng-checkbox></td>
        <td><ng-checkbox data-checked="app.EmailFlag" rounded="true"></ng-checkbox></td>
        </tr>
        </tbody>

我正在尝试列出产品类型，名称，EmailFlag和SmsFlag。我如何遍历json结构来列出数据。

Answer 1

只需检查响应并从您需要的字段构建新数组。像这样：

var d = [];
for( vari=0;i< response.data.ProductDetails.length; ++i) {
    var curr= {
         ProductType: response.data.ProductDetails[i].ProductType, 
         Name: response.data.ProductDetails[i].Name            
    }
    d.push(curr);
 }

  $ctrl.Settings = d;

Answer 2

要操纵对象或数组，我总是使用名为underscore.js的库

这可以帮助您做您想做的事。

var plucked=_.pluck($ctrl.Settings, 'ProductDetails');

此函数将返回一个对象数组。然后你可以循环它。

https://jsfiddle.net/wz2njukj/

Answer 3

你可以实现这个投掷ng-repeat

<div ng-repeat="d in data[0].ProductDetails[0]">
    {{ d.SmsFlag }} {{ d.WebsiteFlag}} {{d.EmailFlag}} 
</div>

查看此内容并根据需要获取数据。

PlunkerHere

Answer 4

ProductDetails包含一个数组，因此您必须嵌套ngRepeats

<span data-ng-repeat="detail in app.ProductDetails">

如果您知道ProductDetails只有一个元素，那么最好更改正在生成的结构（如果可以）。如果没有，您可以在标记中访问它

   <tbody>
    <tr data-ng-repeat="app in $ctrl.Settings" class="content-box">
    <td data-ng-bind="app.ProductDetails[0].ProductType"></td>
    <td data-ng-bind="app.ProductDetails[0].Name"></td>
    <td><ng-checkbox data-checked="app.ProductDetails[0].settings.SmsFlag" rounded="true"></ng-checkbox></td>
    <td><ng-checkbox data-checked="app.ProductDetails[0].settings.EmailFlag" rounded="true"></ng-checkbox></td>
    </tr>
    </tbody>

或者您可以在将控制器中的数据传递到视图之前对其进行按摩。

$ctrl.Settings = response.data.map(products=>products.ProductDetails[0])

循环遍历Angular JS中的json服务响应

4 个答案: