Question

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

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

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

Ajax调用循环只有一个对象

1 个答案: