我一直在提取数据,我列出了源代码,但不知道如何在这个例子中做日期。如果有人可以指导我,那会很棒。
<!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
}
}
]
}
对于任何指针都非常满意
答案 0 :(得分:0)
我会改变原始的json,以便在angularjs方面保持清晰和简单....
$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>
答案 1 :(得分:-1)
如果你这样做会很好:
<!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}}
这是约会。
这是Plunker
答案 2 :(得分:-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>