CODEWITHSUNDEEP
javascriptjqueryajaxjson
Flap Jack
Flap Jack

Reputation: 87

Ajax call loop only one object

I have the following ajax call but instead to show me all objects it shows me only the last object from json file. Why is 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 where getVideoURL is my 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(){
          // get the popup and increase the watched value
          chrome.storage.local.get({ 'watched' : 0 },function(item){
            console.log(item);
            chrome.storage.local.set({'watched':item.watched + 1});
          });

          console.log('injected');
        });
      });
    }
  }

Upvotes: 0

Views: 82

Answers (1)

jmgross
jmgross

Reputation: 2336

Your JSON is an object, and the property video is declared three times. So the last declaration stay in the memory.

Maybe you should change your JSON structure and use an 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"
        }
    }
]

Upvotes: 2

Related Questions