jQueryのJSON解析データ

Question

this is my json: 

{ 
"box 1": [{ 
    "difficulty_grade": "5a+" 
}, { 
    "gym": "New_gym" 
}, { 
    "route_author": "some author" 
},]} 

これは私のコードである可変groupsは、画像上でこのJSONで画像

for (var k in groups){ 
$p("#panel").append('<div class="flip_sector">' + k + '<span style="float:right;margin-right:7px" id="fav_m"><i class="fa fa-plus-circle" aria-hidden="true"></i></span><div class="sect_n"></div></div>'); 
for (var i = 0; i<groups[k].length;i++){ 
$p("<span>"+groups[k][i]['route_author']+" | "+groups[k][i]['route_author']+"</span>").insertAfter(".flip_sector"); 

変数グループに示したJSONを含みます。

console.log(groups[k][i]['difficulty_grade']); 
} 
} 

私は、オブジェクトからのデータが含まれているwhickヘッダボックス1、BOX2、...、と身体とのslidetoogleを作成する必要があります。

これは私の出力です。この出力で

がbox 1から最初のオブジェクトだけを表示します。私を助けることができますか？

Answer 1

誤って秒を使用しています。

for (var k in groups){ 
    for (var i in groups[k]){ 
    console.log(groups[k][i]['difficulty_grade']); 
    } 
} 

Answer 2

私の問題を解決しました。これは固定コードです。

var count = 0; 
    for (var k in groups){ 

$p(".loader_sector").append('<div class="flip_sector" id="sector_id_'+count+'"><div class="header" style="padding: 6px;margin-bottom:4px;margin-left: -10px;padding-left: 13px;">' + k + '<span style="float:right;margin-right:7px" id="fav_m"><i class="fa fa-plus-circle" aria-hidden="true"></i></span></div><div id = "container_id_'+count+'" class="container_class" style="display:none"></div></div>'); 
console.log(groups[k]); 

for (var i = 0; i< groups[k].length; i++) { 
console.log(groups[k][i]['difficulty_grade']); 
$p("#container_id_"+count+"").append("<div class='pan_sect' data-count='"+count+"'><div style='margin-bottom:-33px'><img style='height:46px!important;border-radius:100%' src='/dev/application/modules/User/externals/images/nophoto_user_thumb_profile.png'/><div style ='position:relative;bottom:46px;left:64px;color:#009c89'>"+ groups[k][i]['route_author'] +"</div>" + "<span style = 'font-size:10px;color:grey;position:relative;left:64px;bottom:46px'>" + groups[k][i]['route_name'] + "| Grade: " + groups[k][i]['difficulty_grade'] + "| Box4" + "</span></div><hr style='width:96%'></div>"); 
}count++; 

} 

問題：私はここに追加します。

$p("#container_id_"+count+"").append("<div class='pan_sect' data-count='"+count+"'><div style='margin-bottom:-33px'><img style='height:46px!important;border-radius:100%' src='/dev/application/modules/User/externals/images/nophoto_user_thumb_profile.png'/><div style ='position:relative;bottom:46px;left:64px;color:#009c89'>"+ groups[k][i]['route_author'] +"</div>" + "<span style = 'font-size:10px;color:grey;position:relative;left:64px;bottom:46px'>" + groups[k][i]['route_name'] + "| Grade: " + groups[k][i]['difficulty_grade'] + "| Box4" + "</span></div><hr style='width:96%'></div>"); 

以前、私は同じクラスに新しいdiv要素を追加します。私は困難なIDを変数countを使用して作成し、それを$p("#container_id_"+count+"")に追加します