Не определено при попытке вытащить json img

Я пытаюсь заполнить div картиной НАСА дня, используя свой API.Не определено при попытке вытащить json img

Я написал запрос AJAX в JQuery, но когда я исполню функцию, я просто получить ссылки на undefined

Чего не хватает в моей функции?

$(document).ready(function() { 
    $('form').submit(function(evt) { 
     evt.preventDefault(); 
     //AJAX 
     var url = "https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw" 
     function nasaData(data) { 
      var photoHTML = '<div>'; 
      $.each(data, function(i, photo) { 
       photoHTML += '<a href="' + photo.url + '">'; 
       photoHTML += '<p>"' + photo.explaination + '"</p>' 
       photoHTML += '<img src="' + photo.copyright + '"> </a>'; 
      }); 
      photoHTML += "</div>"; 
      $('#photos').html(photoHTML); 
     } 
     $.getJSON(url, nasaData); 
    }); //end eventsubmit 
});

Markup

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="stylesheet" type="text/css" href="flicker.css"> 
     <title>Testing Access to Flicker API</title> 
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script src="flicker.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <h1 class="text-center">Welcome to the API search test.</h1> 
      <h4 class="text-center">Use the form below to search the open NASA API based.</h4> 
      <form> 
       <div class="col-sm-4 form-group"> 
        <input type="submit" class='button' /> 
       </div> 
      </form> 
     </div> 
     <div id="photos"></div> 
    </body> 
</html>

источник

2016-07-10 Something is missing

Я думаю, вы должны попросить, чтобы JSON на стороне сервера, я не вижу заголовок CORS Access-Control-Allow-Origin: *, чтобы позволить вам сделать запрос внутри браузер. – progysm

@progysm CORS здесь не проблема. Сервер действительно корректно возвращает «Access-Control-Allow-Origin» для любого домена ссылки. – Brad

нет необходимости использовать $ .each() как все уже в данных параметр

Здесь вы идете.

$(document).ready(function() { 
 
    $('form').submit(function (evt) { 
 
     evt.preventDefault(); 
 
     //AJAX 
 
     var url = "https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw" 
 
     function nasaData(data) { 
 
      var photoHTML = '<div>'; 
 
      photoHTML += '<a href="' + data.hdurl + '">'; 
 
      photoHTML += '<p>"' + data.title + '"</p>'; 
 
      photoHTML += '<img src="' + data.hdurl + '"> </a>'; 
 
      photoHTML += "</div>"; 
 
      $('#photos').html(photoHTML); 
 
     } 
 
     $.getJSON(url, nasaData); 
 
    }); //end eventsubmit 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="flicker.css"> 
 
    <title>Testing Access to Flicker API</title> 
 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
    <script src="flicker.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <h1 class="text-center">Welcome to the API search test.</h1> 
 
     <h4 class="text-center">Use the form below to search the open NASA API based.</h4> 
 
     <form> 
 
      <div class="col-sm-4 form-group"> 
 
       <input type="submit" class='button' /> 
 
      </div> 
 
     </form> 
 
    </div> 
 
    <div id="photos"> 
 
    </div> 
 
</body> 
 
</html>

N.B .: Чтобы играть с API использованием console.log() является лучшим вариантом для проверки передачи данных. URL

Codepen: http://codepen.io/arsho/full/ZOXago/

источник

2016-07-10 05:04:51 arsho

Ваш код опасно вводит произвольные данные в HTML. – Brad

Там же несколько проблем здесь. Во-первых, вы используете $.each(), когда возвращается только одно изображение. Есть один объект ... ничего не перебирать. Не используйте его.

Следующая проблема заключается в том, что вы просто объединяете данные в HTML. Делая это, вы потенциально можете создать недействительный HTML и даже рискуете ввести код в свою страницу. Вместо этого вы должны создавать элементы и устанавливать их атрибуты. Попробуйте это вместо:

$.getJSON('https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw').then(function(data) { 
    $('.photos').append(
    $('<img>').attr('src', data.hdurl) 
); 
})

Я оставлю это вам, чтобы решить, какие еще атрибуты установить, и где установить текст. (Кстати, когда вы устанавливаете текст, используйте метод .text() для его установки. Опять же, конкатенация текста в контексте HTML приведет к тому, что текст будет интерпретироваться как HTML!

источник

2016-07-10 04:59:43 Brad

Вы можете нажать URL-адрес, чтобы просмотреть содержание. Она не возвращает массив элементов, но переменная ключ пишется неправильно

объяснение против объяснений

a.href = photo.hdurl (highdef) 
a.alt = photo.title 
p = photo.explanation 
img.src = photo.url (not copyright)

источник

2016-07-10 05:01:17 Steve

Не определено при попытке вытащить json img

ответ

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