Question

我正在编写一个Chrome扩展程序，它将每分钟获取JSON数据，并根据结果更新弹出框的html正文（点击图标后可访问）。

这是我的background.js：

var lastResponse = ""; //Here I save the JSON I receive

function generateTable() { //This function generates the html body table
    console.log('Generating table');
    var resp = JSON.parse(lastResponse);

    var headers=new Array("", "last", "buy", "sell", "15m", "24h");

    // creates a <table> element and a <tbody> element
    var tbl      = document.createElement("table");
    var tblBody = document.createElement("tbody");

    // creating all cells

    var row = document.createElement("tr");
    for (var i=0;i<6;i++)
    {
        var cell = document.createElement("td");
        var cellText = document.createTextNode(headers[i]);
        cell.appendChild(cellText);
        row.appendChild(cell);
    }
    tblBody.appendChild(row);


    for(var key in resp){ {
        // creates a table row
        row = document.createElement("tr");

        for (var i = 0; i < 6; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            if (i==0) {
                var cellText = document.createTextNode("");
            } else {
                var cellText = document.createTextNode(key);
            }
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    document.body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}

function readBlock() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://blockchain.info/ticker");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                lastResponse = xhr.responseText;
            }
        }
    }
    xhr.send();
}

function onAlarm(alarm) {
    if (alarm && alarm.name == 'refresh') {
        readBlock();
    }
}

document.addEventListener('DOMContentLoaded', function () {
  generateTable();
});


chrome.alarms.create('refresh', {periodInMinutes: 1.0});
chrome.alarms.onAlarm.addListener(onAlarm);
readBlock();

当我尝试运行此操作时，出现错误

Uncaught SyntaxError：输入background.js：82
的意外结束

第82行是.js的最后一行。我猜我遇到了问题，因为我尝试在可用之前访问JSON。我应该如何使这个程序正常工作？

Answer 1

您收到该错误是因为function generateTable()未关闭...

嗯，确实如此，但是在第26行你有for(var key in resp){ { ...这是一个额外的{并导致格式错误的javascript函数。（未闭合）

修复该行并告诉我们这是否是唯一的问题。

祝你的项目好运。

修改：（新信息更新）

将json变量传递给函数并仔细检查格式是否正确。我还建议使用try函数...

   // your JSON data as string
   var lastResponse = '{"id":1, "color":"red"}';
   // the function...
   function generateTable(jsonString){
      ...some code...
      ...some code...
      try {
         var resp = JSON.parse(jsonString);
      } catch (e) {
         // return false if the string can't be parsed to json
         console.log('error found:' + e);
         return false;
      }
      // looking good, go ahead!
      ...some code...
      ...some code...
   }
   // and last, call the function with the JSON string in it:
    generateTable(lastResponse);

最后一如既往，祝你好运并继续努力; - ）

如何基于定期提取的数据生成Chrome Extension的弹出框体？

1 个答案: