javascript - Ajax 调用仅循环一个对象

Question

我有以下 ajax 调用，但为了显示所有对象，它只显示 json 文件中的最后一个对象。这是为什么？

Ajax 调用

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" }
}

回调函数，其中 getVideoURL 是我的 Ajax 调用函数

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');
        });
      });
    }
  }

Answer 1

您的 JSON 是一个对象，并且属性 video 声明了三次。所以最后的声明保留在内存中。

也许您应该更改 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"
        }
    }
]