Чтение удаленного объекта JSON в расширении хрома

При изучении разработки Chrome Extension я попытался загрузить JSON с локального сервера, чтобы отобразить его во всплывающем окне.Чтение удаленного объекта JSON в расширении хрома

JSON, кажется, проходит через, так как я могу отображать его в консоли, но потом он вроде как «исчезает». Я не могу понять, что происходит, любая помощь будет очень признательна.

Вот мой сценарий popup.js:

function getLatestContents() { 

    var URL = "http://localhost:8000/api/search/" 
    var items = []; 

    $.getJSON(URL, function(data) { 

     $.each(data, function(idx, val) { 
      var link = "<a href='" + val.url + "'>" + val.name + "</a>"; 
      var element = "<li id='" + val.id + "'>" + link + "</li>" 
      items.push(element); 
     }); 

    }); 

    console.log(items); // prints an array of strings 
    console.log(items.length); // returns 0 (weird) 
    return items; 
} 



$(function(){ 
    var contents = getLatestContents(); 
    console.log(contents); // prints an array of strings 
    console.log(contents.length); // returns 0 (??) 

    if (contents instanceof Array) { 
     console.log("YES"); // returns YES 
     console.log(contents.length); // returns 0 (??) 

     for (var i = 0; i < contents.length; i++) { 
      console.log(i); // nothing happens 
     } 

    } 

});

Как вы можете видеть, что я пытался печатать вещи в консоли, чтобы выяснить, что происходит, - однако эти данные кажутся несовместимыми друг с другом. Массив печатается, но его длина, как представляется, '0' ...

manifest.json

{ 
    "manifest_version": 2, 

    "name": "Testing app", 
    "description": "This extension is just a test.", 
    "version": "1.0", 
    "browser_action": { 
    "default_icon": "19x19.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
     "http://localhost/*" 
    ] 
}

popup.html

<!doctype html> 
<html> 
    <head> 
    <title>This is a test</title> 
    <script src="libs/jquery-1.8.3.min.js"></script> 
    <script src="popup.js"></script> 
</head> 
    <body> 
     <h2>Hello</h2> 
     <div id="content"></div> 
    </body> 
</html>

источник

2014-11-17 magicrebirth

Ваш код для обработки элементов массива, который должен быть внутри обработчика getJSON. Функция getLatestContents, вероятно, возвращает пустой массив в зависимости от того, как быстро реагирует ваш сервер. –

Спасибо большое, что было проблемой! – magicrebirth

Ah отметил Стив o'Connor выше: проблема в том, что код обработки JSON был помещен вне кода запроса AJAX, поэтому первый был ошибочно выполнен до последнего.

Это сработало:

$(function(){ 
    var contents = getLatestContents(); 
});  


function getLatestContents() { 

    var URL = "http://localhost:8000/api/search/" 


    $.getJSON(URL, function(data) { 
     var items = []; 
     $.each(data, function(idx, val) { 
      var link = "<a href='" + val.url + "'>" + val.name + "</a>"; 
      var element = "<li id='" + val.id + "'>" + link + "</li>" 
      items.push(element); 
     }); 

     $.each(items, function(idx, obj) { 
      $("#content").append(obj); 
     }); 

    }); 

}

источник

2014-11-17 17:55:59 magicrebirth

Чтение удаленного объекта JSON в расширении хрома

ответ

Смежные вопросы