2016-12-10 9 views
0

我試圖訪問JavaScript中的JSON對象並將它們顯示在HTML表格中,我設法做到了,但未能顯示其中一列。正在訪問已激活的json對象

project link

<script> 
     var arrItems = [];  // THE ARRAY TO STORE JSON ITEMS. 
     $.each(data.glance, function (index, value) { 
      arrItems.push(value);  // PUSH THE VALUES INSIDE THE ARRAY. 


     // EXTRACT VALUE FOR TABLE HEADER. 
     var col = []; 
     for (var i = 0; i < arrItems.length; i++) { 
      for (var key in arrItems[i]) { 
       if (col.indexOf(key) === -1) { 
        col.push(key); 
       } 
      } 
     } 

     // CREATE DYNAMIC TABLE. 
     var table = document.createElement("table"); 

     // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. 

     var tr = table.insertRow(-1);     // TABLE ROW. 

     for (var i = 0; i < col.length; i++) { 
      var th = document.createElement("th");  // TABLE HEADER. 
      th.innerHTML = col[i]; 
      tr.appendChild(th); 
     } 

     // ADD JSON DATA TO THE TABLE AS ROWS. 
     for (var i = 0; i < arrItems.length; i++) { 

      tr = table.insertRow(-1); 
      data 
      for (var j = 0; j < col.length; j++) { 
       var tabCell = tr.insertCell(-1); 
       tabCell.innerHTML = arrItems[0]; 
       tabCell.innerHTML = arrItems[i][col[j]]; 
      } 
     } 

     // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
     var divContainer = document.getElementById("daytoday"); 
     divContainer.innerHTML = ""; 
     divContainer.appendChild(table); 
    }); 

而且,我試圖訪問圖像和滑塊顯示他們,但不知道如何訪問嵌套圖像對象,

問:可有人表演我如何訪問圖像?

Image slider page

<script> 

$('img[class="logo"]').attr('src',data.logo); 
$('div[class="header_bg"]').css('background-image', 'url(' + data.topbanner + ')'); 
//alert(JSON.stringify(data.property_images)); 
var countDown=0; 
$.each(data.property_information,function(key,value){ 
    if(key!='NGORONGORO SOPA LODGE'){ 
    //alert(key); 
    var cont=""; 
    var innerDivTop ='<div class="centre-container">' 
         +'<div class="page-content">' 
         +'<div class="flex">' 
         +'<div class="body" style="width: 100%;">' 
          +'<div class="content-block"><h2 style="font-weight:bold">'+key+'</h2>' 
          +'<div class="flexslider">' 
           +'<div class="arrow-next" data-role="'+countDown+'"></div>' 
           +'<div class="arrow-back" data-role="'+countDown+'"></div>' 
           +'<ul class="services dynmic_'+countDown+'" >'; 



    for(var i=0;i<value.length;i++) { 

     if(i==0) { 
     // alert(value[i]); 
     // console.log(value[i]); 

     cont +='<li style="display: block;"><img src="'+value[i]+'" alt="" style="width:1088px;height:430px;" ></li>'; 

     } else { 
     cont +='<li><img src="'+value[i]+'" alt="" style="width:1088px;height:430px;"></li>'; 

     } 
    } 

     var innerDivBot='</ul>' 
          +'</div></div></div></div></div></div>'; 
$('#contentRpt').append(innerDivTop+cont+innerDivBot); 
countDown +=1; 
} 
}); 

這裏是我的JSON數據例如:

{ "glance": { 
"Day 1": { 
    "location": "ARUSHA", 
    "property": "THE ARUSHA HOTEL" 
}, 
"Day 2": { 
    "location": "TARANGIRE NATIONAL PARK", 
    "property": "TARANGIRE SAFARI LODGE" 
}, 
"Day 3": { 
    "location": "LAKE MANYARA NATIONAL PARK", 
    "property": "LAKE MANYARA HOTEL" 
}, 
"Day 4": { 
    "location": "SERENGETI NATIONAL PARK", 
    "property": "SERENGETI SOPA LODGE" 
}, 
"Day 5": { 
    "location": "SERENGETI NATIONAL PARK", 
    "property": "SERENGETI SOPA LODGE" 
}, 
"Day 6": { 
    "location": "SERENGETI NATIONAL PARK", 
    "property": "SERENGETI SOPA LODGE" 
}, 
"Day 7": { 
    "location": "NGORONGORO CONSERVATION AREA AUTHORITY", 
    "property": "NGORONGORO SOPA LODGE" 
} 
}, "property_information": { 
"THE ARUSHA HOTEL": { 
    "description": "Arusha\u2019s supreme boutique hotel offering first class accommodation and service, surrounded by the history of bygone eras. The hotel boasts the finest location in the heart of Arusha, in the tranquil surroundings of its own tropical gardens.\r\n\r\nThe Arusha Hotel boasts 86 elegantly appointed rooms included 4 Suites, 25 Executive Deluxe rooms and 57 Superior Rooms. Professionally managed, we ensure the needs of every guest are carried out with East African charm and warmth.\r\n\r\n", 
    "images": [ 
    "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/dining_parachichi.jpg", 
    "http:\/\/asktechtzco.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/images-30.jpeg", 
    "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/room_superior1.jpg" 
    ] 
}, 
"TARANGIRE SAFARI LODGE": { 
    "description": "Built on top of a high bluff with a breathtaking panorama, our lodge is superbly located in Tarangire National Park, providing one of the best views in Africa.\r\n\r\nCarving out the landscape below the lodge is Tarangire River, a favourite watering place, which attracts impressive numbers and variety of game. The scene unfolds before you while lounging on the outdoor patio, allowing you to appreciate Tarangire\\\\\\\\\\\\\\&#039;s diverse wildlife without ever leaving the lodge.", 
    "images": [ 
    "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-31.jpeg", 
    "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-32.jpeg", 
    "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-33.jpeg" 
    ] 
} 

}}

+0

循環怎麼你的JSON數據是什麼樣子?添加樣品到您的問題 –

+0

@RKSaini我已添加樣品json數據 –

+0

因此,您需要顯示天列作爲表的第一列 –

回答

0

您試圖顯示屬性名稱,以便您在嵌套循環這裏首先訪問對象屬性及其值,然後再循環到ex從外部循環中提取的值中創建區域值。

嘗試這樣

$(function() { 
    table = $("<table></table>").appendTo("#daytoday"); 
    table.append("<tr><th>DAY</th><th> LOCATION </th><th> HOTEL </th></tr>") 
    $.each(data.glance, function(index, value) { 
    row = $("<tr></tr>").appendTo(table); 
    $("<td></td>").appendTo(row).html(index); 

    $.each(value, function(i, v) { 
     $("<td></td>").appendTo(row).html(v); 
    }); 
    }); 

}); 

var data = { 
 
    "glance": { 
 
    "Day 1": { 
 
     "location": "ARUSHA", 
 
     "property": "THE ARUSHA HOTEL" 
 
    }, 
 
    "Day 2": { 
 
     "location": "TARANGIRE NATIONAL PARK", 
 
     "property": "TARANGIRE SAFARI LODGE" 
 
    }, 
 
    "Day 3": { 
 
     "location": "LAKE MANYARA NATIONAL PARK", 
 
     "property": "LAKE MANYARA HOTEL" 
 
    }, 
 
    "Day 4": { 
 
     "location": "SERENGETI NATIONAL PARK", 
 
     "property": "SERENGETI SOPA LODGE" 
 
    }, 
 
    "Day 5": { 
 
     "location": "SERENGETI NATIONAL PARK", 
 
     "property": "SERENGETI SOPA LODGE" 
 
    }, 
 
    "Day 6": { 
 
     "location": "SERENGETI NATIONAL PARK", 
 
     "property": "SERENGETI SOPA LODGE" 
 
    }, 
 
    "Day 7": { 
 
     "location": "NGORONGORO CONSERVATION AREA AUTHORITY", 
 
     "property": "NGORONGORO SOPA LODGE" 
 
    } 
 
    }, 
 
    "property_information": { 
 
    "THE ARUSHA HOTEL": { 
 
     "description": "Arusha\u2019s supreme boutique hotel offering first class accommodation and service, surrounded by the history of bygone eras. The hotel boasts the finest location in the heart of Arusha, in the tranquil surroundings of its own tropical gardens.\r\n\r\nThe Arusha Hotel boasts 86 elegantly appointed rooms included 4 Suites, 25 Executive Deluxe rooms and 57 Superior Rooms. Professionally managed, we ensure the needs of every guest are carried out with East African charm and warmth.\r\n\r\n", 
 
     "images": [ 
 
     "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/dining_parachichi.jpg", 
 
     "http:\/\/asktechtzco.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/images-30.jpeg", 
 
     "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/the_arusha_hotel\/room_superior1.jpg" 
 
     ] 
 
    }, 
 
    "TARANGIRE SAFARI LODGE": { 
 
     "description": "Built on top of a high bluff with a breathtaking panorama, our lodge is superbly located in Tarangire National Park, providing one of the best views in Africa.\r\n\r\nCarving out the landscape below the lodge is Tarangire River, a favourite watering place, which attracts impressive numbers and variety of game. The scene unfolds before you while lounging on the outdoor patio, allowing you to appreciate Tarangire\\\\\\\\\\\\\\&#039;s diverse wildlife without ever leaving the lodge.", 
 
     "images": [ 
 
     "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-31.jpeg", 
 
     "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-32.jpeg", 
 
     "http:\/\/asktechtz.co.tz\/spear22\/\/images\/demo\/accommodation\/tarangire_safari_lodge\/images-33.jpeg" 
 
     ] 
 
    } 
 
    } 
 
}; 
 
$(function() { 
 
    table = $("<table></table>").appendTo("#daytoday"); 
 
    table.append("<tr><th>DAY</th><th> LOCATION </th><th> HOTEL </th></tr>") 
 
    $.each(data.glance, function(index, value) { 
 
    row = $("<tr></tr>").appendTo(table); 
 
    $("<td></td>").appendTo(row).html(index); 
 

 
    $.each(value, function(i, v) { 
 
     $("<td></td>").appendTo(row).html(v); 
 
    }); 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="daytoday"> 
 

 
</div>

第二個問題:

關於第二個問題,你需要通過閥門 所以你需要的圖像屬性循環打電話給你的循環value.images

因此改變你的內心像這樣

for (var i = 0; i < value.images.length; i++) { 

    if (i == 0) { 
     // alert(value[i]); 
     // console.log(value[i]); 
     cont += '<li style="display: block;"><img src="' + value.images[i] + '" alt="" style="width:1088px;height:430px;" ></li>'; 

    } else { 
     cont += '<li><img src="' + value.images[i] + '" alt="" style="width:1088px;height:430px;"></li>'; 

    } 
} 
+0

上方的圖像謝謝@ R.K.Saini。這正是我需要的。 –

+0

你有沒有想法我可以如何根據第二個問題訪問圖片? –

+0

在第二個問題中,您想要將圖像幻燈片添加到滑塊右側? –