Javascript - マニフェストjsonを取得してオブジェクトとして使用する方法

Question

なぜconsole.log('Your query count: ' , data);がnullを表示していますか？ （でも、結果は成功であるとデバッグコンソールネットワーク]タブには、データが正常にクロールされた示して？）

manifest.jsonを：

{ 
    "title": "API test", 
    "server": [ 
    { "agent": "abc",   
     "url": "def" },   
    ], 
} 

のindex.php：

<script> 
var getJSON = function(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true); 
    xhr.responseType = 'json'; 
    xhr.onload = function() { 
     var status = xhr.status; 
     if (status == 200) { 
     callback(null, xhr.response); 
     } else { 
     callback(status); 
     } 
    }; 
    xhr.send(); 
}; 

getJSON('http://localhost/manifest.json', 
function(err, data) { 
    if (err != null) { 
    alert('Something went wrong: ' + err); 
    } 
    else { 
    var read = JSON.stringify(data); 
    console.log('Your query count: ' , data); 
    } 
}); 
</script> 

Answer 1

あなたのコードは私のために動作しますが、試してみてください

var read = JSON.stringify(data); 
console.log('Your query count: ' , read); 

代わりの

var read = JSON.stringify(data); 
console.log('Your query count: ' , data); 

編集：あなたが正しいmanifest.jsonをJSONではないようにああ、それが見えます。カンマを削除してみてください

{ 
"title": "API test", 
"server": [{ 
    "agent": "abc", 
    "url": "def" 
}] 
} 

Answer 2

あなたのコードは大丈夫です。 しかし、は、私はあなたのJSONはちょうどそれを削除し、あなたのコードが動作するエンド

{ 
    "title": "API test", 
    "server": [ 
    { "agent": "abc",   
     "url": "def" },   
    ],<-- this one 
} 

で,を持っていることに気づきます。 また、getJSONの匿名関数のelse演算子では、変数dataをreadで置き換えると、JSONが文字列として取得されるか、data変数からデータを取得できます。ここでは、データを取得するための3つの選択肢があります。それでも

var getJSON = function(url, callback) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.responseType = 'json'; 
 
    xhr.onload = function() { 
 
    var status = xhr.status; 
 
    if (status == 200) { 
 
     callback(null, xhr.response); 
 
    } else { 
 
     callback(status); 
 
    } 
 
    }; 
 
    xhr.send(); 
 
}; 
 

 
getJSON('https://gist.githubusercontent.com/teocci/3d128c27e37cc5d9b90ade9d68e84ca7/raw/e49f9d765567572aa4119142dc46ea5cc55d9b15/manifest.json%2520', 
 
    function(err, data) { 
 
    if (err != null) { 
 
     alert('Something went wrong: ' + err); 
 
    } else { 
 
     var read = JSON.stringify(data); 
 
     console.log('Your query count: ', read); 
 
     getInfoA(data); 
 
     getInfoB(data); 
 
     getInfoC(data); 
 
    } 
 
    }); 
 

 
function getInfoA(jsonData) { 
 
    var title = jsonData.title; 
 
    var server = jsonData.server; 
 
    var agent = server[0].agent; 
 
    var url = server[0].url; 
 

 
    console.log('getInfoA---'); 
 

 
    console.log('title: ', title); 
 
    console.log('agent: ', agent); 
 
    console.log('url: ', url); 
 
} 
 

 
function getInfoB(jsonData) { 
 
    var title = jsonData.title; 
 
    var server = jsonData.server; 
 

 
    console.log('getInfoB---'); 
 
    console.log('title: ', title); 
 

 
    Object.keys(server).map(function(key, index) { 
 
    var item = server[key]; 
 
    var agent = item.agent; 
 
    var url = item.agent; 
 
    console.log('agent: ', agent); 
 
    console.log('url: ', url); 
 
    }); 
 
} 
 

 
function getInfoC(jsonData) { 
 
    var title = jsonData.title; 
 
    var server = jsonData.server; 
 
    console.log('getInfoC---'); 
 
    console.log('title: ', title); 
 
    Object.keys(server).forEach(function(key) { 
 
    var item = server[key]; 
 
    var agent = item.agent; 
 
    var url = item.agent; 
 
    console.log('agent: ', agent); 
 
    console.log('url: ', url); 
 
    }); 
 
}