Данные JSON не печатаются в li с использованием jQuery в AngularJS

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 незапуск цикла $ digest AngularJS, который может привести к неожиданному трудному отладочному поведению.

Чтобы извлечь 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;
        });
});

Надеюсь, этопомогает:)