<分区>
目前，从this fiddle可以看出，我将一个 JSON 存储为变量:
const tree = { ...
}
然后 JS 遍历整个树，搜索 '201603' 下的所有结果:
const Chart201603 = walk(tree, '201603');
最后，脚本然后仅搜索要显示的“浓度”节点:
const Chart201603_Concentration = Chart201603.map(entry => {
return entry.Concentration;
});
然后将在“201603”和“浓度”下的整个树中找到的数字数组以及数组的总和打印到我的 HTML 中的跨度:
我还可以通过更改此行来指定我希望 JS 在树中的哪个位置查找此信息:
const Chart201603 = walk(tree, '201603');
像这样:
const Chart201603 = walk(tree.BILL.Municipal, '201603');
现在返回的结果较少，因为它跳过了一些节点:
然而，我想要做的不是像这样将所需路径硬编码到 JS 中，而是让它等于文本区域或跨度等的值。
类似于 this .
现在有一个值设置如下的跨度:
<span id="value">BILL.Municipal</span>
我已经创建了一个 span 值的变量:
const newPath = document.getElementById('value').innerHTML;
但是现在当我这样设置路径时:
const Chart201603 = walk(tree.newPath, '201603');
它不返回任何结果。
有人可以帮忙解决这个问题吗？并建议我如何才能使这种方法起作用？
如果您不想使用 JSFiddle 进行测试，这里也是代码:
const walk = (root, filter) => {
const result = [];
const follow = (root) => {
if (root instanceof Array) {
root.forEach(elem => {
follow(elem);
});
} else if (root instanceof Object) {
Object.keys(root).forEach(elem => {
if (elem === filter) {
result.push(root[elem]);
} else {
follow(root[elem]);
}
});
}
};
follow(root);
return result;
};
const tree = {
"BILL" : {
"Municipal" : {
"CAD" : {
"Short" : {
"Low" : {
"High" : {
"N" : {
"CANADA" : {
"IssueName00085" : {
"CA6832Z57Z70" : {
"201603" : {
"Concentration" : 2,
"ConcentrationTier1" : 2,
"ConcentrationTier2" : 0,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 140,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
},
"201604" : {
"Concentration" : 6,
"ConcentrationTier1" : 3,
"ConcentrationTier2" : 3,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 140,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
}
}
}
},
"USA" : {
"IssueName00953" : {
"USA688I57Z70" : {
"201603" : {
"Concentration" : 4,
"ConcentrationTier1" : 2,
"ConcentrationTier2" : 2,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 40,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
},
"201604" : {
"Concentration" : 9,
"ConcentrationTier1" : 7,
"ConcentrationTier2" : 2,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 140,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
}
}
}
}
}
}
}
}
}
},
"Sovereign" : {
"USD" : {
"Short" : {
"High" : {
"High" : {
"N" : {
"MEXICO" : {
"IssueName00385" : {
"ME6832Z57Z70" : {
"201603" : {
"Concentration" : 9,
"ConcentrationTier1" : 2,
"ConcentrationTier2" : 7,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 140,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
},
"201604" : {
"Concentration" : 16,
"ConcentrationTier1" : 3,
"ConcentrationTier2" : 13,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 140,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
}
}
}
},
"USA" : {
"IssueName00953" : {
"USA688I57Z70" : {
"201603" : {
"Concentration" : 4,
"ConcentrationTier1" : 2,
"ConcentrationTier2" : 2,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 40,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
},
"201604" : {
"Concentration" : 9,
"ConcentrationTier1" : 7,
"ConcentrationTier2" : 2,
"LargestTicket" : 0,
"Maturity" : 201708,
"Outstanding" : 140,
"SmallestTicket" : 0,
"Turnover" : 0,
"TurnoverTeir2" : 0,
"TurnoverTier1" : 0
}
}
}
}
}
}
}
}
}
}
}
}
const newPath = document.getElementById('value').innerHTML;
console.log(newPath)
const Chart201603 = walk(tree.newPath, '201603');
const Chart201603_Concentration = Chart201603.map(entry => {
return entry.Concentration;
});
document.getElementById("Array201603Concentration").innerHTML = Chart201603_Concentration.join(' ');
var ConcentrationSum = Chart201603_Concentration.reduce((total, num) => {
return total + num;
}, 0);
document.getElementById("Array201603ConcentrationSum").innerHTML = ConcentrationSum;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="value">BILL.Municipal</span>
<p>Array: <span id="Array201603Concentration"></span></p>
<p>Array Sum: <span id="Array201603ConcentrationSum"></span></p>