使用getJSON查詢json顯示「undefined」而不是數據

Question

我正在嘗試使用getJSON和jQuery，獲取圖像的URL並將其顯示在此網頁上。

API的URL工作（顯示一個json），並且圖像存在，但顯示「未定義」。

任何想法？

<script type = "text/javascript" language = "javascript"> 
 
    $(document).ready(function() { 
 

 
    $("#driver").click(function(event){ 
 

 
     $.getJSON("https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=cypvw52ysZT16N9HAFuh5bEDXb8lvDmw90ff4v26", {data: "value"}, function(json) { 
 
     $('#stage').html('<img src="' + json.photos.img_src + '">'); 
 
     $('#stage').append('<img src="' + json.photos.img_src + '">'); 
 
     $('#stage').append('<p> ID: ' + json.photos.id+ '</p>'); 
 
     }) 
 
    }); 
 
    }); 
 
</script>

Answer 1

因爲它返回一個數組，你不從數組元素基準

$(document).ready(function() { 

    $("#driver").click(function(event){ 

     $.getJSON("https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=cypvw52ysZT16N9HAFuh5bEDXb8lvDmw90ff4v26", {data: "value"}, function(json) { 
     //$('#stage').html('<img src="' + json.photos[0].img_src + '">'); 
     $('#stage').append('<img src="' + json.photos[0].img_src + '">'); 
     $('#stage').append('<p> ID: ' + json.photos[0].id+ '</p>'); 
     }) 
    }); 
    }); 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="stage"></div> 
<button id="driver">test</button>