Я тестирую сайт AngularJS локально. У меня возникают проблемы с анализом данных JSON с использованием $http.get из локального файла JSON.
Когда я определяю JSON в своем контроллере, у меня нет проблем. Однако, когда я получаю JSON из файла (data.json), формат JSON отличается, в соответствии с консолью JavaScript.
Каким образом форматы JSON отличаются? В частности, извлеченный $http.get JSON имеет цифровые клавиши. Могу ли я просто удалить цифровые клавиши? Или что-то не так с моей декларацией/синтаксисом JSON? Ниже приведена дополнительная информация.
Вот как я определяю его в мой контроллер:
$scope.customerReviews = [
{
'id': '0',
'title': 'Outstanding Employee!',
'text': 'bar foo bar foo',
'image': '<img class="img-responsive img-hover" src="images/bob.jpg">',
'href': '',
'date': 'June 17, 2014',
'author': 'john',
'articleType': 'article',
'neverSettle': 'partnering',
'category': 'customerReviews'
},
{
'id': '1',
'title': 'hooray!',
'text': 'congratulations',
'image': '<img class="img-responsive img-hover" src="images/bob.png">',
'href': '',
'date': 'June 17, 2014',
'author': 'sir charles',
'articleType': 'article',
'neverSettle': 'innovating',
'category': 'customerReviews'
},
{
'id': '2',
'title': 'Outstanding Employee',
'text': 'bar foo foo',
'image': '<img class="img-responsive img-hover" src="images/bilbo.jpg">',
'href': '',
'date': 'June 17, 2014',
'author': 'johnny',
'articleType': 'article',
'neverSettle': 'engaging',
'category': 'customerReviews'
},
{
'id': '3',
'title': 'Thank you',
'text': 'much thanks',
'image': '<img class="img-responsive img-hover" src="images/x.jpg">',
'href': '',
'date': 'June 17, 2014',
'author': 'The Graduate College',
'articleType': 'article',
'neverSettle': 'innovating',
'category': 'customerReviews'
}
];
Когда я копирую пасту из [ в ]; в инструменты разработчика консоли Chrome, я получаю следующий результат:
Как я уже говорил выше, мой текущий код отлично печатает мой контент. Но если я попытаюсь получить JSON во внешнем файле, используя $http.get, он не распечатает мой контент, а в консоли JavaScript показан другой формат JSON.
Вот мой $http.get код (в контроллере):
// http get json content
$scope.customerReviews = [];
$http.get("js/models/data.json").success(function(data){
console.log("success!");
$scope.customerReviews = data;
console.log($scope.customerReviews);
return $scope.customerReviews;
});
Вот data.json. Как вы можете видеть, этот JSON-файл отличается от того, как я определяю свой контроллер. В частности, " и ' переключаются на совместимость с JSON. Я запускал это через проверку подлинности JSON, и он отформатирован правильно. Кроме того, когда я копирую пасту в консоль, я получаю первый вывод консоли. Только когда я делаю $http.get Я получаю «цифровые клавиши», и мои функции печати не работают.
[
{
"id ": "0 ",
"title ": "Outstanding Employee! ",
"text ": "too lazy to obfuscate all of my content",
"image ": "<img class='img-responsive img-hover' src='images/GladisTolsa.jpg'> ",
"href ": " ",
"date ": "June 17, 2014 ",
"author ": "Martha Castleberry ",
"articleType ": "article ",
"neverSettle ": "partnering ",
"category ": "customerReviews "
},
{
"id ": "1 ",
"title ": "Facilities Help ",
"text ": "too lazy to obfuscate all of my content",
"image ": "<img class='img-responsive img-hover' src='images/FernandoLopez.png'> ",
"href ": " ",
"date ": "June 17, 2014 ",
"author ": "Lucy Valenzuela ",
"articleType ": "article ",
"neverSettle ": "innovating ",
"category ": "customerReviews "
},
{
"id ": "2 ",
"title ": "Outstanding Employee ",
"text ": "too lazy to obfuscate all of my content",
"image ": "<img class='img-responsive img-hover' src='images/MariaAlvarado.jpg'> ",
"href ": " ",
"date ": "June 17, 2014 ",
"author ": "Martha Castleberry ",
"articleType ": "article ",
"neverSettle ": "engaging ",
"category ": "customerReviews "
},
{
"id ": "3 ",
"title ": "Thank you ",
"text ": "too lazy to obfuscate all of my content",
"image ": "<img class='img-responsive img-hover' src='images/MovingServices.jpg'> ",
"href ": " ",
"date ": "June 17, 2014 ",
"author ": "The Graduate College ",
"articleType ": "article ",
"neverSettle ": "innovating ",
"category ": "customerReviews "
}
]
Так $http.get запрос работает. Вот вывод на консоль:
Уф. Прошу прощения за долготу моего вопроса.
Мой вопрос: Почему кажущиеся эквивалентными JSON выводятся различные форматы? В частности, почему у получателя $http.get JSON (второй) есть цифровые клавиши? Мне нужен второй вывод консоли, чтобы иметь тот же вывод, что и первый вывод консоли. Могу ли я просто удалить цифровые клавиши? Или что-то не так с моей декларацией/синтаксисом JSON?
Любой ввод оценивается. Особенно все, что могло бы улучшить мои навыки AngularJS и знания JSON. Заранее спасибо.
EDIT: Спасибо всем до сих пор. По-видимому, это индексы массивов, написанные инструментами разработчика Chrome, а не числовые ключи. Я не буду менять свой пост, чтобы избежать путаницы для других.По желанию, вот как работает моя печать:
<!-- ng repeat of Blog Preview Rows (reversed) -->
<div ng-repeat="x in getCategory().slice().reverse() | limitTo:quantity " close="getCategory().splice(index, 1)">
<previews></previews>
<hr />
</div>
getCategory() это функция, которая получает строку запроса в URL с помощью регулярных выражений. Как указано выше, это работает, когда JSON объявляется в контроллере. Возможно getCategory() побежал после$http.get, поэтому не печатать ничего? Также обратите внимание, что я просто изменяю ng-repeat.
Вот <preview> директива:
.directive('previews', function() {
return {
restrict: 'AEC',
replace: 'true',
templateUrl: 'js/views/articleCollection.htm'
};
});
articleCollection.htm:
<div class="row">
<div class="col-md-1 text-center">
<p><span ng-bind-html="x.articleType"></span></p>
<p><span ng-bind-html="x.neverSettle"></span></p>
<p><span ng-bind-html="x.date"></span></p>
</div>
<div class="col-md-5">
<a href="{{ x.href }}">
<span ng-bind-html="x.image"></span>
</a>
</div>
<div class="col-md-6">
<h3>
<a href="{{ x.href }}"><span ng-bind-html="x.title"></span></a>
</h3>
<p>
by <span ng-bind-html="x.author"></span>
</p>
<p><span ng-bind-html="x.text"></span></p>
<a class="btn btn-default" href="{{ x.href }}">Read More <i class="fa fa-angle-right"></i></a>
</div>
</div>
Еще раз спасибо. Дайте мне знать, как я могу уточнить свой вопрос. Также дайте мне знать, как я могу улучшить что-то связанное с AngularJS. До сих пор путешествие было doozy.
Что числовые ключи? Единственные числовые ключи, которые я вижу, - это индекс массива, который является лишь частью представления инструментов разработчиков массива. Результат кажется абсолютно таким же. – dcardoso
Кажется, что мне тоже. –
Я вижу, поэтому это не цифровые клавиши, а массивные индексы. Вывод выглядит точно так же, но мои существующие функции печати (которые используют ng-repeat) не работают со вторым. Нужно ли делать (без) массивные индексы с этим? – chakeda