Данные JSON не печатаются в li с использованием jQuery в AngularJS
Я хочу получить категорию из своего 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.info(data[0].Category);
//var text = data[0].Category;
var array = [];
for (var i = 0; i < data.length; i++) {
var text2 = data[i];
console.info(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
}]
}
]
}
Хорошо, Рори, в следующий раз я позабочусь, спасибо за отзыв.
Просто избегайте использования jQuery в максимально возможной степени, особенно когда AngularJS предоставляет эквивалентные функции, здесь с $ http. Кроме того, вы ничего не делаете с возвращенным массивом, я полагаю, он должен быть назначен $ scope.category, но тогда у вас будут проблемы с циклом дайджеста ... Обратите внимание, что в целом мы используем множественное число для массивов (категория - > категории) и в единственном числе для элемента итерации (категории -> категория). Это позволит избежать путаницы для будущих читателей (включая вас самих).
Ответы 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;
});
});
Надеюсь это поможет :)
Большое спасибо, потому что я новичок в Angular и очень мало знаю jquery, поэтому я не был уверен, как его использовать. Спасибо за помощь, но снова я задам вам такой вопрос. Пожалуйста, не возражайте и продолжайте помогать мне: )
Я пробовал ваш код, но у меня возникла проблема: поскольку у меня есть номер категории, он не печатает первую категорию, предположим [0,1,2,3,4], он печатает 1,2,3,4, но не 0.
Вы на 100%, что ваш JSON действителен? Пожалуйста, запустите его через валидатор, такой как jsonlint.com. Не понимаю, почему пропустили первый элемент.
Да, я проверил JSON. Это действительно. Если вы дадите мне адрес электронной почты, я также могу отправить вам снимок экрана. Так как я не знаю, куда вставить изображение в стеке. Здесь я вставляю код из отладчика:
я вставляю код из отладчика: <ul> <li ng-repeat = "cat в категориях" class = "ng-binding ng-scope"> </li> <li ng-repeat = "cat в категориях" class = " ng-binding ng-scope "> Предметы кладовой </li> <li ng-repeat = " cat в категориях "class = " ng-binding ng-scope "> Скоропортящиеся </li> </ul>
Молодец :) Если ваша проблема решена благодаря моему комментарию, отметьте это как предпочтительный ответ
Практически ни один из ваших кодов не является правильным. Во-первых, вы показываете не то, что нужно.
Измените свой 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>
Во-первых, постарайтесь отформатировать свои вопросы. Это было нечитаемо до того, как я его отредактировал. Во-вторых, будьте осторожны при совместном использовании jQuery и Angular. Я предлагаю придерживаться только одного.