Как мне разобрать ответ JSONp в Javascript - PullRequest
Новая
       10

Как мне разобрать ответ JSONp в Javascript

0 голосов
/ 08 июня 2018

Я новичок в Javascript и пытаюсь получить данные из Extrernal API с другого веб-сайта, проанализировать их и отобразить их на моей HTML-странице.В настоящее время все работает, за исключением того, что я пытаюсь получить информацию из ответа JSONp, чтобы обновить отображение HTML.

Код JavaScript, который я использую: 

//Fetch method grabs information from "myURL"
fetch("https://exampleURL.com", {
    mode: 'cors'
  })
  .then(function(response) {
    if (response.ok) //Checking if response is returned correctly
    {
      var res = response; //Storing response in a variable
      jQuery000000000000000_0000000000(res); //Sending response parsing function
    }
  });


//Parsing function reads the 'title' data from the JSONp response
function jQuery000000000000000_0000000000(res) {
  document.getElementById('title').innerHTML = res[0].title; //Error occurs here
}

И ответ JSONp, который я должен получить от внешнего API: 

jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]);

Всякий раз, когда я запускаю этот код, я получаю "Uncaught (in обещание) TypeError: Cannot read property 'titleОшибка «неопределенного» в консоли, ссылающаяся на строку innerHTML в моем коде выше.

Любые указатели будут с благодарностью!:)

[РЕДАКТИРОВАТЬ] Из того, что я прочитал из других ответов в Интернете, я подумал, что было бы целесообразно создать функцию с тем же именем, что и в ответе (jQuery000000000000000_0000000000 (res);).Я не уверен, что это правильно.

Ответ приходит с внешнего сайта.Спасибо!

1 Ответ

0 голосов
/ 08 июня 2018

В данном случае это запрос JSONP.Вам просто нужно вызвать файл <script>, когда он вам нужен. 

<script src="/path/to/jsonp.js"></script>

Сценарий является исполняемым.Таким образом, вам не нужно использовать AJAX или любой другой способ для его вызова.И видите, как вы отправляете свой res?Вы делаете это не правильно.Это потому, что у вас уже есть правильный вызов в ответе: 

jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]);

Приведенный выше код необходимо просто выполнить.Не используйте fetch().

Ваш полный код должен быть: 

<script>
  //Parsing function reads the 'title' data from the JSONp response
  function jQuery000000000000000_0000000000(res) {
    document.getElementById('title').innerHTML = res[0].title; //Error occurs here
  }
</script>
<script src="/path/to/jsonp.js"></script>

Еще один способ сделать это внутри скрипта - использовать: 

//Parsing function reads the 'title' data from the JSONp response
function jQuery000000000000000_0000000000(res) {
  document.getElementById('title').innerHTML = res[0].title; //Error occurs here
}
$.getScript("/path/to/jsonp.js");

Содержимое в вышеуказанном файле автоматически вызывает функцию jQuery000000000000000_0000000000(res) с допустимыми параметрами.:)

Подробное объяснение

В вашем текущем коде происходит то, что вы делаете AJAX-вызов для запроса JSONP, который вы не должныделать, и он делает ваш код следующим образом: 

jQuery000000000000000_0000000000("jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}])");

Когда он пытается получить доступ к свойству title первого элемента, который является строкой, здесь это будет undefined.Потому что строка не будет иметь свойства заголовка.

Вот стек: 

jQuery000000000000000_0000000000(jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]));
res = jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]);
res[0] = undefined;
res[0].title = TypeError;

И вот почему вы получаете неопределенное значение ... :)

...