2016-12-10 2 views
0

Я пытаюсь получить доступ к объектам JSON в JavaScript и отображать их в таблице 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

В вашем втором вопросе вы хотите добавить слайд слайда в свой слайдер? –

Смежные вопросы