2017-02-26 19 views
0

http://www.serveraddress.com/api/users/1が有効で、値が適切なJSON形式になっています。RET APIへのGETリクエスト

JSON:私はのgetUser()を実行しようとすると

{ 
    "id":1, 
    "name":"Ryan Chenkie", 
    "email":"[email protected]", 
    "battles_won":0, 
    "created_at":"2017-02-25 19:20:58", 
    "updated_at":"2017-02-25 19:20:58", 
    "blobs":[ 
     { 
     "id":1, 
     "name":"Blob 1", 
     "type":"type A", 
     "color":"red", 
     "alive":1, 
     "level":1, 
     "exercise_level":-302, 
     "cleanliness_level":-302, 
     "health_level":-302, 
     "owner_id":1, 
     "created_at":"2017-02-25 19:20:58", 
     "updated_at":"2017-02-26 01:23:05" 
     }, 
     { 
     "id":5, 
     "name":"Blob 5", 
     "type":"type C", 
     "color":"blue", 
     "alive":1, 
     "level":1, 
     "exercise_level":-302, 
     "cleanliness_level":-302, 
     "health_level":-302, 
     "owner_id":1, 
     "created_at":"2017-02-25 19:20:58", 
     "updated_at":"2017-02-26 01:23:05" 
     } 
    ] 
} 

、私はSyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON dataを取得します。

私のコードで何が問題になっていますか?私のsetRequestHeaderは間違っていますか?

getUser(1); 

function getUser(userId) { 
    var usersUrl = "http://www.serveraddress.com/api/users/"; 
    var params = userId; 
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("GET", usersUrl + params, true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send(); 
    var response = JSON.parse(xhttp.responseText); 

    return response; 

}

+0

を?私はそこに誤りがあると思う。 – Psi

+0

@Psi OPを編集してJSONを追加しました。私はそれが有効なJSONだと言ったJSONフォーマッタを調べました。 – falafel

+0

ブラウザツールまたはFiddlerでレスポンスを確認してください。実際にJSONをレスポンスとして取得していることを確認してください。 – JLRishe

答えて

1

のXMLHttpRequestは非同期であるため、関数は、要求があっても送信される前に(空である)responseを返しています。
要求が完了した後、イベントのloadイベントが発生すると呼ばれるコールバック関数を使用、responseTextを取得するには、次の結果のJSONは何ですか

function getUser(userId, callback) { 
 
    var usersUrl = "http://www.serveraddress.com/api/users/"; 
 
    var params = userId; 
 
    var xhttp = new XMLHttpRequest(); 
 
    
 
    xhttp.addEventListener('load', callback); 
 
    xhttp.addEventListener('error',() => console.log("Request to "+usersUrl+params+" failed")); 
 
    
 
    xhttp.open("GET", usersUrl + params, true); 
 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
 
    xhttp.send(); 
 
} 
 
getUser(1, function() { 
 
    console.log(JSON.parse(this.responseText)); 
 
});

関連する問題