javascript - Ajax call loop only one object -

i have following ajax call instead show me objects shows me last object json file. why this?

ajax call

var ajax = new xmlhttprequest();   var data = 'data.json';   var url = 'http://localhost:8888/';   ajax.onreadystatechange = function() {     if (ajax.readystate === 4 ) {       if(ajax.status === 200){         callback(ajax.responsetext);       } else if(ajax.status === 400) {         console.warn('404');       } else {         console.warn('bad' + ajax.responsetext);       }     }   };   ajax.open('get', url+data, true);   ajax.setrequestheader('content-type', 'application/x-www-form-urlencoded; charset=utf-8');   ajax.setrequestheader('access-control-allow-origin', '*');   ajax.send(data); 

json

{     "video": {     "mp4": "http://localhost:8888/500x.mp4",      "webm": "http://localhost:8888/500x.webm",      "title": "video1" },      "video": {     "mp4": "http://localhost:8888/dodge.mp4",      "webm": "http://localhost:8888/dodge.webm",      "title": "video2" },      "video": {     "mp4": "http://localhost:8888/500x.mp4",      "webm": "http://localhost:8888/500x.webm",      "title": "video3" } } 

callback function getvideourl ajax call function

inject : function(tabid, infos, tab){     if(doner.activated && infos.status === 'complete' && doner.filters.isyoutubeurl(tab.url)){       doner.getvideourls(function(data){         chrome.tabs.executescript(tabid,{           code : '!function(e){"use strict";console.debug("starting injection");var t=document.createelement("script");t.src=chrome.extension.geturl("scripts/injectedscript.js"),t.onload=function(){this.parentnode.removechild(this)},(document.head||document.documentelement).appendchild(t);var o=document.getelementbyid("extadd");o&&o.parentnode&&(console.log("removing",o),o.parentnode.removechild(o));var n=document.createelement("iframe");document.getelementbyid("player-api").setattribute("style","padding:0;");n.id="extadd",n.setattribute("style","border-style:none;-webkit-appearance:none;border:0;outline:none;"),n.classname="html5-video-player el-detailpage ps-null hide-info-bar autohide-controls-aspect autohide-controls-fullscreen autominimize-progress-bar-non-aspect ad-created endscreen-created captions-created captions-loaded ytp-block-autohide paused-mode",n.setattribute("allowfullscreen","true"),n.src=chrome.extension.geturl("iframe/iframe.html?id="+e);var d=document.getelementbyid("player-api");d.insertbefore(n,d.childnodes[0]);}("' + encodeuricomponent(json.stringify(data)) + '");',           runat: 'document_start'         }, function(){           // popup , increase watched value           chrome.storage.local.get({ 'watched' : 0 },function(item){             console.log(item);             chrome.storage.local.set({'watched':item.watched + 1});           });            console.log('injected');         });       });     }   } 

your json object, , property video declared 3 times. last declaration stay in memory.

maybe should change json structure , use array :

[     {         "video": {             "mp4": "http://localhost:8888/500x.mp4",             "webm": "http://localhost:8888/500x.webm",             "title": "video1"         }     },      {         "video": {             "mp4": "http://localhost:8888/dodge.mp4",             "webm": "http://localhost:8888/dodge.webm",             "title": "video2"         }     },      {         "video": {             "mp4": "http://localhost:8888/500x.mp4",             "webm": "http://localhost:8888/500x.webm",             "title": "video3"         }     } ]