ネストされた形式の JSON データを含むファイルがあります。このデータをトラバースして JQuery リストビューの形式で出力したいのですが、それができません。
JSON データの形式は次のとおりです。
{
"Name":"A",
"Company": "B",
"Address": {
"Street":"ABC",
"City":"XYZ"
}
}
私は次のことを試しました：
$.each(data, function(key,value) {
$('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+value+'</span></li>');
});
しかし、これは「アドレス」ブロックを正しく出力しません。
How about using value.Address.City and value.Address.Street?? The most common way to access JSON data is through dot notation. This is simply the object name followed by a period and then followed by the name/property you would like to access. http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29
For example,
$.each(data, function(key,value) {
$('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+ value.Address.Street + "," + value.Address.City +'</span></li>');
});
For detail coding,
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function display(data) {
$.each(data, function(key,value) {
$('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+ value.Address.Street + "," + value.Address.City +'</span></li>');
});
}
$(document).ready(function() {
var data = [
{
"Name" : "ABC",
"Company" : "AA Company",
"Address" : {
"Street" : "123 Main Street",
"City" : "Yangon"
}
},
{
"Name" : "DEF",
"Company" : "BB Company",
"Address" : {
"Street" : "8941 Mandalay",
"City" : "NaypiDaw"
}
}
];
display(data);
});
</script>
</head>
<body>
<div id="companyDetails"></div>
</body>
</html>
For you case that you do not know which data are in json file,
function display(data,flag) {
$.each(data, function(key,value) {
if ($.isPlainObject(value)) {
if(flag == true)
{
$('#companyDetails').append('<b>' + "Company " + (key + 1) + '</b>');
}
display(value,false);
}
else
$('#companyDetails').append('<li>' + key + " : " +'<span class="ui-li-aside">'+ value +'</span></li>');
});
}
In calling display function,
var flag = true;
display(data,flag);
Your output would be
I hope this would help.
これが最も効率的な方法かどうかはわかりませんが、あなたが望むことはできると思います。
前提: データは配列であり、各配列要素はオブジェクト (ハッシュ) です。Windows 上の Chrome でのみテストされています。
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function read_record(data) {
$.each(data, function(key,value) {
if ($.isPlainObject(value))
read_record(value);
else
$('#details').append('<li>' + key + ' = ' + value + '</li>');
});
}
$(document).ready(function() {
var data = [
{
"Name" : "John",
"Company" : "Doe",
"Address" : {
"Street" : "123 Main Street",
"City" : "San Francisco"
}
},
{
"Name" : "Jane",
"Company" : "Johnson",
"Address" : {
"Street" : "57 Heinz Lane",
"City" : "Dallas"
}
}
];
read_record(data);
});
</script>
</head>
<body>
<ul id="details"></ul>
</body>
</html>
プロデュース: