Uncaught TypeError：無法讀取null的屬性'removeChild'（使用來自Instagram的JSONP響應）

我正在嘗試製作Google Places API + Instagram API應用程序。用戶輸入位置和關鍵字以及結果和關聯的Instagram照片呈現。結果的lat/lng座標存儲在數組中，然後連接到Instagram URL JSON-P響應。該URL作爲腳本標籤附加到HTML中，並在以後再將照片呈現時除去。但是，我遇到一個錯誤：Uncaught TypeError：無法讀取null的屬性'removeChild'（使用來自Instagram的JSONP響應）

未捕獲的類型錯誤：無法讀取null的屬性'removeChild'。

這是Javascript。這個JS是我的應用程序的一個簡單版本（位置是預先定義的）。

document.addEventListener('DOMContentLoaded', function() { 

var sanFran = {lat: 37.7700623, lng: -122.4463697}; 
var losAngeles = {lat: 34.0482814, lng: -118.2479595}; 
var newYork = {lat: 40.7484444, lng: -73.9878441}; 
var chicago = {lat: 41.8503659, lng: -87.7064438}; 
var boston = {lat: 42.3134791, lng: -71.1271966}; 

var locationArray = [sanFran, losAngeles, newYork, chicago, boston]; 

function loop(array){ 
    for(var i = 0; i < array.length; i++){ 
     var lat = array[i].lat; 
     var lng = array[i].lng; 
     var accessToken = '249457765.1fb234f.adc28edf9d7f4ad2ad281752445eac86'; 
     var url = 'https://api.instagram.com/v1/media/search?lat=' + lat + '&lng=' + lng + '&distance=100' + '&access_token=' + accessToken + '&callback=?'; 
     getJSONP(url, success, i); 
    } 
} 

function getJSONP(url, success, i) { 

     var ud = '_' + +new Date, 
     script = document.createElement('script'), 
     body = document.getElementsByTagName('body')[0] 

     //callback for JSON-P response 
     window[ud] = function(data) { 

      script.parentNode.removeChild(script); 
      success && success(data, i); 
     }; 
     console.log(url); 
     body.appendChild(script); 
     script.src = url.replace('callback=?', 'callback=' + ud); 


} 

function success(response, i){ 
     var results = document.getElementById("results"); 
     var responseLength = response.data.length; 
     var totalResults = 5; 

     //cap photos to 5 or less 
     responseLength = totalResults; 

     for(var j = 0; j < responseLength; j++){ 
      var img = document.createElement("IMG"); 
      img.src = response.data[j].images.thumbnail.url; 
      results.appendChild(img); 
      img.id = "img"; 
     }    
} 
loop(locationArray); 
});

下面是HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Places and Instagram App</title> 
<meta name="viewport" content="initial-scale=1.0"> 
<meta charset="utf-8"> 
<link href="style1.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxUwNycYzt3GGO0FvZGYJd3zUQQDEFal8&libraries=places"></script> 
<script src="stack.js"></script> 

    </head> 
    <body> 
    <h1>Instagram Photos</h1> 
    <div id = "results"> 
    </div> 
    </body> 
</html>

從理論上講，如果應用程序工作正常，共25張照片將使。

注：我不能使用JQuery或任何外部庫/框架。我也使用這個解決方案作爲參考：Failed to execute 'removeChild' on 'Node'，但它沒有爲我工作（控制檯中的錯誤消失，但照片仍然不會呈現）。此外，當控制檯記錄窗口[ud]變量中的[數組項目]時，看起來項目未按正確的順序傳遞。謝謝您的幫助。

來源

2016-04-27 hewp

該項目不按正確的順序傳遞，因爲AJAX請求是異步的，所以如果你想要讓他們爲了你可以創建一個數組存儲所有結果並使用索引將從API中檢索到的數據存儲在結果數組中 –

我改變了一點你的代碼，首先，現在你將位置數組傳遞給函數getLocationPhotos（），這個方法將調用方法getLocation（），在那裏你將從Instagram中檢索所有的照片。你遇到的一個問題是，當某些請求根本沒有任何響應時，你對請求的responseLength進行了硬編碼。例如，從您的要求

/**/ _1461800988408({"meta":{"code":200},"data":[]})

此外，每個請求的是前一個結束後執行的，所以你必須爲了你的圖片，其中一個答覆。下面是新的代碼，我提出：

document.addEventListener('DOMContentLoaded', function() { 

var sanFran = {lat: 37.7700623, lng: -122.4463697}; 
var losAngeles = {lat: 34.0482814, lng: -118.2479595}; 
var newYork = {lat: 40.7484444, lng: -73.9878441}; 
var chicago = {lat: 41.8503659, lng: -87.7064438}; 
var boston = {lat: 42.3134791, lng: -71.1271966}; 

var locationArray = [sanFran, losAngeles, newYork, chicago, boston]; 

function getLocationPhotos(locations){ 
    if(locations.length) getLocation(locations, successCallback, 0); 
} 

function getLocation (locations, successCallback, index) { 
     var lat = locations[index].lat; 
     var lng = locations[index].lng; 
     var accessToken = '249457765.1fb234f.adc28edf9d7f4ad2ad281752445eac86'; 
     var url = 'https://api.instagram.com/v1/media/search?lat=' + lat + '&lng=' + lng + '&distance=100' + '&access_token=' + accessToken + '&callback=?'; 
     getJSONP(url, function (response, index) { 
      successCallback(response, index); 
      if (locations.length - 1 > index) getLocation(locations, successCallback, index + 1); 
     }, index); 
} 

function getJSONP(url, successCallback, index) { 

     var ud = '_' + +new Date(), 
     script = document.createElement('script'), 
     body = document.getElementsByTagName('body')[0]; 

     //callback for JSON-P response 
     window[ud] = function(data) { 

      script.parentNode.removeChild(script); 
      if(!data) return errorCallback(index, successCallback); 
      if(successCallback) successCallback(data, index); 
     }; 
     console.log(url); 
     body.appendChild(script); 
     script.src = url.replace('callback=?', 'callback=' + ud); 


} 

function errorCallback(index, afterEndsCallback) { 
    console.log('Your index' + index + 'had a problem retrieving the data'); 
    afterEndsCallback([], index); 
} 

function successCallback(response, i){ 
     var results = document.getElementById("results"); 
     var responseLength = response.data.length; 

     for(var j = 0; j < responseLength; j++){ 
      var img = document.createElement("IMG"); 
      img.src = response.data[j].images.thumbnail.url; 
      results.appendChild(img); 
      img.id = "img"; 
     }    
} 
getLocationPhotos(locationArray); 
});

Link to the code

來源

2016-04-27 23:54:51

謝謝羅德里戈！像魅力一樣工作。errorCallback是巧妙的。 – hewp

-1

它的工作原理。將腳本放在末尾或在窗口的onload上執行。

來源

2016-04-27 23:33:00 Gabriel

爲什麼downvote？我實際上使用建議的更改進行了測試，結果很奏效。 – Gabriel

Uncaught TypeError：無法讀取null的屬性'removeChild'（使用來自Instagram的JSONP響應）

回答

相關問題