Получение данных в angularjs
0
Я застрял в извлечении данных, я получил список, но не знаю, как делать даты в этом примере. Было бы замечательно, если бы кто-нибудь мог меня направить.
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AyimaData</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="customersCtrl">
<ul>
<li data-ng-repeat="x in ayima">
<p>{{ x.domain }}</p>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://dfjb.webcindario.com/dataAyima.php")
.success(function(response) {
$scope.ayima = response.marketIntel;
})
.error(function(data, status, headers, config) {
// something went wrong
});
});
</script>
</body>
</html>
Данные выглядят так:
{
"marketIntel": [
{
"domain": "apple.com",
"scores": {
"2015-09-26": 9.9,
"2015-09-27": 9.73,
"2015-09-28": 9.91,
"2015-09-29": 9.4,
"2015-09-30": 10.16,
"2015-10-01": 9.59,
"2015-10-02": 10.16,
"2015-10-03": 9.67,
"2015-10-04": 10.13,
"2015-10-05": 10.33,
"2015-10-06": 9.6,
"2015-10-07": 9.97,
"2015-10-08": 10.14,
"2015-10-09": 9.59,
"2015-10-10": 9.49,
"2015-10-11": 9.56,
"2015-10-12": 9.57,
"2015-10-13": 9.57,
"2015-10-14": 9.52,
"2015-10-15": 9.94,
"2015-10-16": 9.5,
"2015-10-17": 9.59,
"2015-10-18": 10.19,
"2015-10-19": 10.03,
"2015-10-20": 9.59,
"2015-10-21": 10.12,
"2015-10-22": 9.83,
"2015-10-23": 9.96,
"2015-10-24": 9.46,
"2015-10-25": 9.54
}
},
{
"domain": "techradar.com",
"scores": {
"2015-09-26": 8.66,
"2015-09-27": 9.16,
"2015-09-28": 9.07,
"2015-09-29": 8.98,
"2015-09-30": 9.14,
"2015-10-01": 8.9,
"2015-10-02": 9.07,
"2015-10-03": 8.92,
"2015-10-04": 9.12,
"2015-10-05": 9.5,
"2015-10-06": 9.41,
"2015-10-07": 9.21,
"2015-10-08": 9.28,
"2015-10-09": 9.38,
"2015-10-10": 9.5,
"2015-10-11": 8.85,
"2015-10-12": 9.38,
"2015-10-13": 9,
"2015-10-14": 8.87,
"2015-10-15": 8.9,
"2015-10-16": 9.06,
"2015-10-17": 9.03,
"2015-10-18": 8.87,
"2015-10-19": 9.34,
"2015-10-20": 9.14,
"2015-10-21": 8.87,
"2015-10-22": 9.34,
"2015-10-23": 9.19,
"2015-10-24": 9.02,
"2015-10-25": 9.4
}
},
{
"domain": "carphonewarehouse.com",
"scores": {
"2015-09-26": 7.89,
"2015-09-27": 7.39,
"2015-09-28": 7.66,
"2015-09-29": 7.37,
"2015-09-30": 7.31,
"2015-10-01": 7.33,
"2015-10-02": 7.46,
"2015-10-03": 7.39,
"2015-10-04": 7.43,
"2015-10-05": 7.46,
"2015-10-06": 7.35,
"2015-10-07": 7.39,
"2015-10-08": 7.98,
"2015-10-09": 7.79,
"2015-10-10": 7.63,
"2015-10-11": 7.65,
"2015-10-12": 7.6,
"2015-10-13": 7.85,
"2015-10-14": 7.46,
"2015-10-15": 7.88,
"2015-10-16": 7.66,
"2015-10-17": 7.3,
"2015-10-18": 7.26,
"2015-10-19": 7.37,
"2015-10-20": 7.41,
"2015-10-21": 7.21,
"2015-10-22": 7.26,
"2015-10-23": 7.17,
"2015-10-24": 7.21,
"2015-10-25": 7.14
}
},
{
"domain": "samsung.com",
"scores": {
"2015-09-26": 6.99,
"2015-09-27": 7.03,
"2015-09-28": 7.1,
"2015-09-29": 7.19,
"2015-09-30": 7.21,
"2015-10-01": 7.16,
"2015-10-02": 6.99,
"2015-10-03": 6.99,
"2015-10-04": 6.92,
"2015-10-05": 6.92,
"2015-10-06": 6.93,
"2015-10-07": 6.95,
"2015-10-08": 6.96,
"2015-10-09": 6.91,
"2015-10-10": 6.88,
"2015-10-11": 7.09,
"2015-10-12": 7.07,
"2015-10-13": 7.17,
"2015-10-14": 7.24,
"2015-10-15": 7.06,
"2015-10-16": 7.02,
"2015-10-17": 7.08,
"2015-10-18": 6.98,
"2015-10-19": 6.91,
"2015-10-20": 7.13,
"2015-10-21": 6.94,
"2015-10-22": 6.96,
"2015-10-23": 7.12,
"2015-10-24": 7.13,
"2015-10-25": 6.94
}
},
{
"domain": "amazon.co.uk",
"scores": {
"2015-09-26": 5.28,
"2015-09-27": 5.19,
"2015-09-28": 5.23,
"2015-09-29": 5.32,
"2015-09-30": 5.33,
"2015-10-01": 5.25,
"2015-10-02": 5.25,
"2015-10-03": 5.17,
"2015-10-04": 4.96,
"2015-10-05": 5.15,
"2015-10-06": 5.27,
"2015-10-07": 5.23,
"2015-10-08": 5.36,
"2015-10-09": 5.15,
"2015-10-10": 5.02,
"2015-10-11": 5.09,
"2015-10-12": 5.08,
"2015-10-13": 5.12,
"2015-10-14": 5.14,
"2015-10-15": 5.17,
"2015-10-16": 5.25,
"2015-10-17": 5.18,
"2015-10-18": 5.09,
"2015-10-19": 5.09,
"2015-10-20": 5.18,
"2015-10-21": 5.32,
"2015-10-22": 5.33,
"2015-10-23": 5.26,
"2015-10-24": 5.23,
"2015-10-25": 5.31
}
},
{
"domain": "trustedreviews.com",
"scores": {
"2015-09-26": 3.98,
"2015-09-27": 4.45,
"2015-09-28": 4.14,
"2015-09-29": 4.4,
"2015-09-30": 4.36,
"2015-10-01": 4.95,
"2015-10-02": 4.95,
"2015-10-03": 4.53,
"2015-10-04": 4.52,
"2015-10-05": 4.72,
"2015-10-06": 5.01,
"2015-10-07": 4.82,
"2015-10-08": 4.67,
"2015-10-09": 4.66,
"2015-10-10": 4.91,
"2015-10-11": 4.87,
"2015-10-12": 4.75,
"2015-10-13": 4.78,
"2015-10-14": 5.15,
"2015-10-15": 4.83,
"2015-10-16": 4.75,
"2015-10-17": 5.04,
"2015-10-18": 5,
"2015-10-19": 5.05,
"2015-10-20": 5.04,
"2015-10-21": 5.13,
"2015-10-22": 5.57,
"2015-10-23": 5.38,
"2015-10-24": 5.18,
"2015-10-25": 5.26
}
},
{
"domain": "gsmarena.com",
"scores": {
"2015-09-26": 4.43,
"2015-09-27": 4.31,
"2015-09-28": 4.14,
"2015-09-29": 4.48,
"2015-09-30": 4.41,
"2015-10-01": 4.35,
"2015-10-02": 4.48,
"2015-10-03": 4.41,
"2015-10-04": 4.4,
"2015-10-05": 4.46,
"2015-10-06": 4.26,
"2015-10-07": 4.65,
"2015-10-08": 4.49,
"2015-10-09": 4.79,
"2015-10-10": 4.76,
"2015-10-11": 4.68,
"2015-10-12": 4.69,
"2015-10-13": 4.5,
"2015-10-14": 4.51,
"2015-10-15": 4.78,
"2015-10-16": 4.5,
"2015-10-17": 4.59,
"2015-10-18": 4.75,
"2015-10-19": 4.8,
"2015-10-20": 4.67,
"2015-10-21": 4.58,
"2015-10-22": 4.91,
"2015-10-23": 4.92,
"2015-10-24": 4.8,
"2015-10-25": 4.76
}
},
{
"domain": "wikipedia.org",
"scores": {
"2015-09-26": 4.57,
"2015-09-27": 4.55,
"2015-09-28": 4.51,
"2015-09-29": 4.54,
"2015-09-30": 4.39,
"2015-10-01": 4.57,
"2015-10-02": 4.48,
"2015-10-03": 4.47,
"2015-10-04": 4.42,
"2015-10-05": 4.3,
"2015-10-06": 4.64,
"2015-10-07": 4.78,
"2015-10-08": 4.61,
"2015-10-09": 4.62,
"2015-10-10": 4.93,
"2015-10-11": 4.74,
"2015-10-12": 4.56,
"2015-10-13": 4.65,
"2015-10-14": 4.62,
"2015-10-15": 4.64,
"2015-10-16": 4.62,
"2015-10-17": 4.5,
"2015-10-18": 4.66,
"2015-10-19": 4.53,
"2015-10-20": 4.5,
"2015-10-21": 4.48,
"2015-10-22": 4.37,
"2015-10-23": 4.59,
"2015-10-24": 4.57,
"2015-10-25": 4.54
}
},
{
"domain": "argos.co.uk",
"scores": {
"2015-09-26": 1.97,
"2015-09-27": 2.11,
"2015-09-28": 1.79,
"2015-09-29": 2.08,
"2015-09-30": 1.86,
"2015-10-01": 2.08,
"2015-10-02": 1.95,
"2015-10-03": 2.15,
"2015-10-04": 1.83,
"2015-10-05": 1.81,
"2015-10-06": 2.09,
"2015-10-07": 1.82,
"2015-10-08": 1.87,
"2015-10-09": 2.25,
"2015-10-10": 2.24,
"2015-10-11": 2.15,
"2015-10-12": 2.31,
"2015-10-13": 2.43,
"2015-10-14": 2.29,
"2015-10-15": 2.17,
"2015-10-16": 2.38,
"2015-10-17": 2.3,
"2015-10-18": 2.16,
"2015-10-19": 2.14,
"2015-10-20": 2.39,
"2015-10-21": 2.18,
"2015-10-22": 2.09,
"2015-10-23": 2.12,
"2015-10-24": 2.33,
"2015-10-25": 2.32
}
},
{
"domain": "o2.co.uk",
"scores": {
"2015-09-26": 2.81,
"2015-09-27": 2.98,
"2015-09-28": 2.85,
"2015-09-29": 3.1,
"2015-09-30": 2.92,
"2015-10-01": 2.9,
"2015-10-02": 2.63,
"2015-10-03": 2.9,
"2015-10-04": 2.67,
"2015-10-05": 2.63,
"2015-10-06": 2.75,
"2015-10-07": 2.74,
"2015-10-08": 2.75,
"2015-10-09": 2.77,
"2015-10-10": 2.62,
"2015-10-11": 2.75,
"2015-10-12": 2.86,
"2015-10-13": 2.88,
"2015-10-14": 2.91,
"2015-10-15": 2.86,
"2015-10-16": 2.85,
"2015-10-17": 2.96,
"2015-10-18": 2.87,
"2015-10-19": 2.78,
"2015-10-20": 2.71,
"2015-10-21": 2.76,
"2015-10-22": 2.58,
"2015-10-23": 2.4,
"2015-10-24": 2.34,
"2015-10-25": 2.31
}
}
]
}
Многое изложено для любых указателей
3 ответа
-1
Лучший ответ
На самом деле вы хотите получить
keyиvalueобъекта
Попробуйте следовать HTML:
<div data-ng-controller="customersCtrl">
<ul>
<li data-ng-repeat="x in ayima">
<p>{{ x.domain }}</p>
<p ng-repeat="(key, value) in x.scores">{{key}},{{value}}</p>
</li>
</ul>
</div>
См. DEMO
Manwal
Поделиться
-
0Downvoter добавить комментарий здесь. И проверить это работает или нет.
-
0Обновленный ответ, добавив демо.
0
Я бы превратил оригинальный json, чтобы все было ясно и проще на угловой стороне.
$http.get("http://dfjb.webcindario.com/dataAyima.php")
.success(function(response) {
var transformedMarketIntel = response.marketIntel.map(function(market){
var scoreObjs = [];
for (var date in market.scores) {
scoreObjs.push({date: date, score: market.scores[date]});
}
return {
domain: market.domain,
scores: scoreObjs
};
});
$scope.ayima = transformedMarketIntel;
})
а затем использовать правильную и понятную форму:
<p ng-repeat="score in x.scores">{{score.date}}</p>
Alex Pollan
Поделиться
0
Хорошо, если вы это сделаете так:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AyimaData</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="customersCtrl">
<ul>
<li data-ng-repeat="x in ayima">
<p>{{ x.domain }}</p>
<p ng-repeat="(key,value) in x.scores">{{key}}</p>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://dfjb.webcindario.com/dataAyima.php")
.success(function(response) {
$scope.ayima = response.marketIntel;
})
.error(function(data, status, headers, config) {
// something went wrong
});
});
</script>
</body>
</html>
Обобщить:
Вы должны использовать
ng-repeat="(key,value) in x.scores"
а затем позвоните
{{key}}
который является датой.
Вот Плункер
uksz
Поделиться
Ещё вопросы
- 1Поиск данных Firebase без одного дочернего узла
- 0SQLSTATE [HY000]: общая ошибка: 1364 Поле 'name' не имеет значения по умолчанию laravel 5.5
- 0Как использовать только один ВХОДНОЙ ТИП = «текст» для проведения двух опросов
- 0boost :: mutex поддерживает try_lock_for в Visual Studio, но не в Xcode
- 0Программа на С ++ показывает очень разное поведение памяти на разных машинах
- 0GCC - определить мою собственную опцию командной строки, которая добавляет список опций
- 0Magento добавляет пользовательское сообщение об ошибке
- 0как вызвать на jquery.smart мастере кнопку Готово?
- 0повторение ассоциативных массивов занимает слишком много времени
- 1Преобразование байтового массива для создания другого звука в приложении Windows 8
- 0PHP require_once не работает для нижнего колонтитула
- 0Получение Mac (системного физического адреса) адреса успешно на локальном хосте, но не на сервере
- 0Spring Data: findByEntityNot () во многих отношениях
- 0Как разделить библиотеку между процессом и вызываемым скриптом, используя SWIG?
- 0получить динамическое значение внутри цикла foreach
- 0MySQL - группировка по неагрегированному столбцу
- 1Есть ли какой-либо тип списка, который будет содержать информацию о пользователе во второй вкладке?
- 1Правильно ли использовать несколько условий OR в одном операторе if, каковы альтернативы?
- 1int (input ()) error - NameError: имя '…' не определено
- 0Angular 1.x, ES5 / ES6 и тестирование с Karma
- 0Странная ошибка IE8 при использовании jQuery
- 0Не удается получить единый стиль в браузерах для календаря
- 1Свободное отображение частных полей NHibernate
- 0Как получить ID оборудования в Java и C ++
- 0PDO вставляет последний идентификатор вставки в две таблицы
- 1Поезд Mobilnet V2 с трансферным обучением в Tensorflow
- 1Создать пары ключ / значение словаря из списка на основе условия
- 0Как открыть несколько форм на одной HTML-странице?
- 1Отображение графики, как они рисуют в разгаре
- 0$ save экземпляра $ save () стирает свойства
- 0Выпадающее меню CSS3 при наведении на размер
- 0Сенсорные события на iPhone
- 0python mysql.connector Mysql Ошибка подключения недоступна
- 0Почему метод setUserId не работает в сущности symfony2?
- 0JQuery + создание радиокнопок для html из массива
- 0Нужно ли удалять этот объект? (если я не собираюсь когда-либо удаляться)
- 0Пользовательский размер фотоснимка Tumblr с бесконечной прокруткой
- 0Ошибка при использовании оператора модуля в qt на двойном
- 0Слайд-тумблер на динамическом контенте
- 0Как отследить все клики на странице в ионном приложении?
- 1Vue JS - Reactivity $ set свойство в массиве объектов
- 0Скрытое поле не появляется в PHP-скрипте
- 1Форматирование значений с плавающей запятой в Java [дубликаты]
- 0Как связать событие клика в угловых JS с помощью requirejs?
- 0синтаксическая ошибка в моих SQL-запросах
- 1Как проверить, имеет ли метод атрибут Castle Interceptor?
- 1Обнаружение попадания между 2 движущимися объектами в CreateJS
- 1subprocess и psutil: как получить список из subprocess.check_output?
- 0Заставить AngularJS ui-router / app ждать данные $ http для предотвращения FOUC
- 1Xpath: найти div, который следует за известным div (не вложенным)
dates???