Question

我正在尝试使用angular.js制作网站我在显示像这样的Json文件中的数据时遇到了一些麻烦：

{
"items": [
    {
        "product": {
            "name": "Smartphone1",
            "images": [
                "img1",
                "img2",
                "img3"
            ],
            "price": {
                "value": 3509.10,
                "installments": 10,
                "installmentValue": 389.90
            }
        }
    },
    {
        "product": { 
            "name": "Smart TV",
            "images": [
                "img4",
                "img5",

            ],
            "price": {
                "value": 1139.90,
                "installments": 10,
                "installmentValue": 134.11
            }
        }
    }




]
}

我的js文件是这样的:(不知道这部分）

angular.module('list', []);
function ListCtrl($scope, $http) {
  $http({
    method: 'GET',
    url: 'data.json'
  }).success(function(data) {
    $scope.items = data.items; 
    $scope.products= [];
    angular.forEach(data.items, function(item, index) {
      angular.forEach(item.product, function(product, index){
        $scope.products.push(product);
      });
    });
  });
}

我的HTML文件是这样的:(不知道这部分）

<body ng-app="list">
 <div ng-controller="ListCtrl">
    <ul ng-repeat="product in products">
      <li >{{product.id}}</li> 
      <li >{{product.name}}</li> 
      <li >{{product.images1}}</li>
      <li >{{product.images2}}</li>
      <li >{{product.images3}}</li> 
      <li >{{product.price.value}}</li>
      <li >{{product.price.installments}}</li>
      <li >{{product.price.installmentValue}}</li> 
   </ul>
 </div>

帮助伙伴们！我想要显示所有产品的名称，图像和价格。对不起我的代码，真的不知道角度

Answer 1

您可以直接将item.product推送到products数组。

app.controller("ListCtrl", ["$scope", "$http",
  function($scope, $http) {
    $scope.products = [];
    $http({
      method: 'GET',
      url: 'data.json'
    }).success(function(data) {
      angular.forEach(data.items, function(item, index) {
        $scope.products.push(item.product);

      });
    });
  }
]);

<强> DEMO

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as ct">
<form name="form" novalidate>
   <input type="text" name="test" ng-required="true" ng-model="name" />
   <span ng-if="">plz input</span>
   <button ng-click="ct.showFormInfo(form)">inside save</button>
</form>
<button ng-click="ct.showFormInfo(form)">outside save</button>

// Code goes here

var app = angular.module("list", []);

app.controller("ListCtrl", function($scope) { 

  $scope.data = {
"items": [
    {
        "product": {
            "name": "Smartphone1",
            "images": [
                "img1",
                "img2",
                "img3"
            ],
            "price": {
                "value": 3509.10,
                "installments": 10,
                "installmentValue": 389.90
            }
        }
    },
    {
        "product": { 
            "name": "Smart TV",
            "images": [
                "img4",
                "img5",

            ],
            "price": {
                "value": 1139.90,
                "installments": 10,
                "installmentValue": 134.11
            }
        }
    }




]
};

});

Answer 3

你错过了控制器的定义：

angular.module('list', []);
function ListCtrl($scope, $http) {
  $http({
    method: 'GET',
    url: 'data.json'
  }).success(function(data) {
    $scope.items = data.items; 
    $scope.products= [];
    angular.forEach(data.items, function(item, index) {
      angular.forEach(item.product, function(product, index){
        $scope.products.push(product);
      });
    });
  });
}

在模块定义之后添加它，如下所示：

angular.module('list', [])
.controller('ListCtrl',
function ListCtrl($scope, $http) {
  $http({
    method: 'GET',
    url: 'data.json'
  }).success(function(data) {
    $scope.items = data.items; 
    $scope.products= [];
    angular.forEach(data.items, function(item, index) {
      angular.forEach(item.product, function(product, index){
        $scope.products.push(product);
      });
    });
  });
});

使用Angular访问嵌套的JSON

3 个答案: