使用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>