在 AngularJS 中使用 jQuery 在 li 中未打印 JSON 数据

Question

我想从我的 JSON 中获取类别。请帮助我，因为我无法在li 中打印此内容。请让我知道我犯了什么错误。

<ul ng-repeat="categories in category">
  <li>{{data.category}}</li>
</ul>

var app = angular.module('myapp', []);

app.controller('myCtrl', function($scope) {
  $.getJSON("category.json", function(data, i) {
    console.log(data[0].Category);
    //var text = data[0].Category;
    var array = [];
    for (var i = 0; i < data.length; i++) {
      var text2 = data[i];
      console.log(text2);
      array.push[text2];
    }
    return array
  });
});

解析后的 JSON 如下所示：

[{
  "Category": "Beauty",
  "subcategory": [{
    "name": "Baby Care",
    "items": [{
        "name": "Soap",
        "Price": "10.00"
      },
      {
        "name": "cream",
        "price": 20.00
      },
      {
        "name": "Drug Store",
        "items": [{
          "name": "Bandage",
          "price": 5.00
        }, {
          "name": "stringe",
          "price": 6.50
        }, {
          "name": " Pain Relief",
          "price": 8.00
        }, {
          "name": "First Aid Kit",
          "price": 14.99
        }, {
          "name": "Cold Relief",
          "price": 6.50
        }]
      }, {
        "name": "Health and Personal Care",
        "items": []
      }, {
        "name": "HouseHold Supplies",
        "items": [{
          "name": "Air Freshener",
          "price": 1.25
        }, {
          "name": "All Purpose Cleaner",
          "price": 2.99
        }, {
          "name": "Disinfecting Wipes",
          "price": 8.99
        }]
      }
    ]
  }

Answer 1

您的代码几乎没有一个是正确的。首先，您没有显示正确的内容。

将您的 HTML 更改为：

<ul ng-repeat="category in categories">
  <li>{{category}}</li>
</ul>

为此，您需要填充 $scope.categories 而不是 var array。所以，其次，你需要使用正确的异步回调：$http.get()

因此，将您的 JS 代码更改为：

var app = angular.module('myapp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("category.json").
  then(function(res){
    var data = res.data;
    var text2;
    $scope.categories = [];
    for (var i = 0; i < data.length; i++) {
      text2 = data[i].Category;
      $scope.categories.push(text2);
    }
  });
});

---

这是一个静态示例（没有$http 回调）：

var app = angular.module('myapp', []);
app.controller('myCtrl', function($scope) {

  var data = [{
    "Category": "Beauty",
    "subcategory": [{
      "name": "Baby Care",
      "items": [{
          "name": "Soap",
          "Price": "10.00"
        },
        {
          "name": "cream",
          "price": 20
        },
        {
          "name": "Drug Store",
          "items": [{
              "name": "Bandage",
              "price": 5
            },
            {
              "name": "stringe",
              "price": 6.5
            },
            {
              "name": " Pain Relief",
              "price": 8
            },
            {
              "name": "First Aid Kit",
              "price": 14.99
            },
            {
              "name": "Cold Relief",
              "price": 6.5
            }
          ]
        },
        {
          "name": "Health and Personal Care",
          "items": []
        },
        {
          "name": "HouseHold Supplies",
          "items": [{
              "name": "Air Freshener",
              "price": 1.25
            },
            {
              "name": "All Purpose Cleaner",
              "price": 2.99
            },
            {
              "name": "Disinfecting Wipes",
              "price": 8.99
            }
          ]
        }
      ]
    }]
  }];
  var text2;
  $scope.categories = [];
  for (var i = 0; i < data.length; i++) {
    text2 = data[i].Category;
    $scope.categories.push(text2);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myCtrl">

  <ul ng-repeat="category in categories">
    <li>{{category}}</li>
  </ul>

</div>

Answer 2

第一个问题是你需要引用ng-repeat中使用的名称，例如：

<ul ng-repeat="cat in categories">
    <li>{{cat.category}}</li>
</ul>

其次，建议不要将 JQuery 和 AngularJS 混合在一起，因为 JQuery 不会触发 AngularJS 的 $digest 循环，这会导致意外的难以调试的行为。

为了获取 JSON，请使用 $http service：

var app = angular.module('myapp', []);

app.controller('myCtrl', function($scope, $http) {
    $scope.categories = [];

    $http.get("category.json")
        .then(function (res) {
            $scope.categories = res.data;
        });
});

希望这会有所帮助:)