Ошибка JavaScript JSONP - Непринятые SyntaxError: Неожиданный токен:

Question

Я что-то разрабатываю локально и запускаю npm.

Я попытался использовать JavaScript для запуска запроса jsonp на api, чтобы вернуть данные.

Я продолжаю получать ту же ошибку, и все выглядит нормально, хотя не уверен, в чем проблема. Любая помощь приветствуется.

Сообщение об ошибке:Uncaught SyntaxError: Unexpected token :

Примечание: Я не хочу использовать JQuery для этого на всех

Вот мой JSONP Funciton

function jsonp(url, callback) { 
    var script = document.createElement("script"); 
    script.src = url 
    document.body.appendChild(script); 
} 

jsonp('/api/nav.json', function(data){ 
    console.log(data); 
}); 

JSON файла

{ 
    "items":[ 
     { 
     "label":"Home", 
     "url":"#/home", 
     "items":[ 

     ] 
     }, 
     { 
     "label":"About", 
     "url":"#/about", 
     "items":[ 
      { 
       "label":"What I eat", 
       "url":"#/about/what-i-eat" 
      }, 
      { 
       "label":"How I Play", 
       "url":"#/about/how-i-play" 
      }, 
     ] 
     }, 
     { 
     "label":"Project", 
     "url":"#/project", 
     "items":[ 
     ] 
     }, 
     { 
     "label":"Ideas", 
     "url":"#/ideas", 
     "items":[ 
      { 
       "label":"Cookies Club", 
       "url":"#/ideas/cookies-club" 
      }, 
      { 
       "label":"Footie Boots", 
       "url":"#/ideas/footie-boots" 
      }, 
      { 
       "label":"Books", 
       "url":"#/ideas/books" 
      } 
     ] 
     }, 
     { 
     "label":"Contact", 
     "url":"#/contact", 
     "items":[ 
      { 
       "label":"Email", 
       "url":"#/contact/email" 
      }, 
      { 
       "label":"Phone", 
       "url":"#/contact/phone" 
      }, 
      { 
       "label":"Snail Mail", 
       "url":"#/contact/snail-mail" 
      } 
     ] 
     } 
    ] 
} 

Answer 1

Вам нужно определить функцию, которая будет вызываться только что загруженным скриптом. Возврат jsonp - это живой код, который будет запускаться немедленно, а не мертвый объект, такой как традиционный json.

Этот код ниже работает и протестирован.

Так что-то вроде этого, где обратный вызов называется theData:

function jsonp(url, callback) { 
    var script = document.createElement("script"); 
    script.src = url 
    document.body.appendChild(script); 
} 


theData = function(data){ 
    console.log(data); 
} 
jsonp('ok.js?callBack=theData'); 

Jquery создает обратный вызов для вас, передав его в JSONP загрузчика и добавить функцию в окно временно, а затем удалить его после того, как его был вызван сразу после отправки его в функцию успеха jsonp. В вашем случае вы можете сделать то же самое, но я подумал, что этот более простой пример продемонстрирует основы.

Затем используйте PHP или подобное, чтобы обернуть JSON в вызове функции. В PHP вы можете получить имя функции с помощью $ GET ['callback'] и использовать эту строку в качестве имени функции функции, в которой вы можете обернуть ваши данные. После загрузки скрипта он попытается запустить «theData», в этом случае это функция, доступная в окне. Это позволит вам загружать локальные файлы, если html также является локальным, и позволяет открывать данные из другого домена. Таким образом, выход с сервера:

theData({ "items":[ 
     { 
     "label":"Home", 
     "url":"#/home", 
     "items":[ 

     ] 
     }, 
     { 
     "label":"About", 
     "url":"#/about", 
     "items":[ 
      { 
       "label":"What I eat", 
       "url":"#/about/what-i-eat" 
      }, 
      { 
       "label":"How I Play", 
       "url":"#/about/how-i-play" 
      }, 
     ] 
     }, 
     { 
     "label":"Project", 
     "url":"#/project", 
     "items":[ 
     ] 
     }, 
     { 
     "label":"Ideas", 
     "url":"#/ideas", 
     "items":[ 
      { 
       "label":"Cookies Club", 
       "url":"#/ideas/cookies-club" 
      }, 
      { 
       "label":"Footie Boots", 
       "url":"#/ideas/footie-boots" 
      }, 
      { 
       "label":"Books", 
       "url":"#/ideas/books" 
      } 
     ] 
     }, 
     { 
     "label":"Contact", 
     "url":"#/contact", 
     "items":[ 
      { 
       "label":"Email", 
       "url":"#/contact/email" 
      }, 
      { 
       "label":"Phone", 
       "url":"#/contact/phone" 
      }, 
      { 
       "label":"Snail Mail", 
       "url":"#/contact/snail-mail" 
      } 
     ] 
     } 
    ] 
})