在json数组属性中循环
Looping through json array properties
我使用JQuery、ChartJS、Moment.js为同一页面上的多个图表收集JSON格式的数据,但数据来自同一JSON源。在JSON中,高度对象是一个图,长度对象是另一个图。这是JSON看起来如何的一个示例
"Series": {
"heights": [
{
"Date": "2014-10-01",
"Value": 22
},
{
"Date": "2014-10-01",
"Value": 53
},
{
"Date": "2014-10-01",
"Value": 57
},
],
"lengths": [
{
"Date": "2014-10-01",
"Value": 54
},
{
"Date": "2014-10-01",
"Value": 33
}
]
}
我已经设法通过JSON循环来显示每个图,但我真的无法使用"DRY-Don't repeat yourself"的方式来完成。现在我有大块的代码很难更新/阅读。
$.getJSON("data.json", function(data) {
var dateArray = [];
var valueArray = [];
for ( var i = 0; i < data.Series["heights"].length; i++) {
var obj = data.Series.heights[i];
var date = obj["Date"].toString();
var Value = obj["Value"];
for ( var key in obj) {
//console.log(obj["Value"]);
//date = obj["Date"];
Value = obj[key].toString();
}
valueArray.push(Value);
dateArray.push(moment(date).format("MMMM Mo"));
var dataArray = {
labels: dateArray,
datasets: [
{
label: "Lengths",
strokeColor: "rgb(26, 188, 156)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: valueArray
}
]
};
}
var ctx = document.getElementById("lengthsChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(dataArray, {
scaleShowGridLines : true,
bezierCurve : true,
bezierCurveTension : 0.4,
datasetStroke : false,
fillColor: "rgba(0,0,0,0)",
datasetFill : false,
responsive: true,
showTooltips: true,
animation: false
});
});
现在,我在一个switch语句中有这个代码,用于"高度"、"长度"等。我想这是一种可怕的方法。但我一直无法为单个图表创建循环。
我试过这样的东西:
for(var x in measurement) {
console.log(measurement[x]);
for ( var i = 0; i < data.Series.hasOwnProperty(measurement).length; i++) {
var obj = data.Series.hasOwnProperty(measurement)[i];
var date = obj["Date"].toString();
var Value = obj["Value"];
console.log(date, Value);
}
但我无法让它工作,无法循环通过data.Series. /heights/lengths../ [i]
我非常感谢如何做到这一点。
谢谢!
如果用data.Series
替换measurement
,并去掉hasOwnProperty(measurement)
,那么您就差不多完成了。您唯一需要的是保持从{Date,Value}对象列表到每个系列的一对日期和值列表的转换。
var series = {};
// This loop is looping across all the series.
// x will have all the series names (heights, lengths, etc.).
for (var x in data.Series) {
var dates = [];
var values = [];
// Loop across all the measurements for every serie.
for (var i = 0; i < data.Series[x].length; i++) {
var obj = data.Series[x][i];
// Assuming that all the different series (heights, lengths, etc.) have the same two Date, Value attributes.
dates.push(obj.Date);
values.push(obj.Value);
}
// Keep the list of dates and values by serie name.
series[x] = {
dates: dates,
values: values
};
}
series
将包含以下内容:
{
heights: {
dates: [
'2014-10-01',
'2014-10-01',
'2014-10-01'
],
values: [
22,
53,
57
]
},
lengths: {
dates: [
'2014-10-01',
'2014-10-01'
],
values: [
54,
33
]
}
}
所以你可以这样使用它们:
console.log(series);
console.log(series.heights);
console.log(series.heights.dates);
console.log(series.heights.values);
console.log(series.lengths);
console.log(series.lengths.dates);
console.log(series.lengths.values);
相关文章:
- Javascript:循环属性内部的条件递增或递减
- 在循环中包含特定属性
- 借助for循环和数组在对象中添加属性
- 不可枚举的属性出现在 for..在 Chrome 中循环
- 我们可以设置属性'id'到不同的'按钮'通过使用javascript或jquery的循环
- 如何在循环中设置onclick属性
- 按数据属性循环元素并替换值
- 使用循环增加css属性值
- 循环浏览JavaScript对象并记录其属性
- ..的Javascript..循环中的对象没有在最后一个属性上运行
- 循环访问 JS 数组 + 数组属性
- 如何使用 jQuery 在循环中获取属性的值
- 为for循环中的对象添加新属性
- 在'用于'如果javascript中不存在对象属性,则循环
- Waypoint的循环,退出循环后属性未定义
- 如何循环对象中的javascript对象并查找属性
- 如何切换音频循环属性
- javascript对象的循环属性
- 帮助循环属性并从数组中引用它们
- 使用DOM方法循环属性