如何通过GitHub URL获取JSON数据并替换本地数据？jQuery求助

问题背景 #

原本通过本地定义的data变量可以正常渲染列表，尝试替换为从GitHub的JSON文件URL获取数据时，$.getJSON代码无法正常工作。相关代码如下：

原有正常代码 #

var data = {
  "items": [
    {
      "src": "xxx",
      "url": "xxx",
      "ttl": "xxx%"
    }
  ]
};

$.each(data.items, function(i, f) {
  $('ul').append('<li class="scroll-nav"><a href="' + f.url + '"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></a></li>');
});

尝试的错误代码 #

$.getJSON('https://raw.githubusercontent.com/user/lokal.json', data.items, function(i, f) {
  $('ul').append('<li class="scroll-nav"><a href="' + f.url + '&quot;"><img class="squareBig" src="' + f.src + '&quot; download="' + f.ttl + '&quot;"></img></a></li>');
});

GitHub上的JSON文件内容（原错误格式） #

var data = {
  "items": [
    {
      "src": "https://xxx",
      "url": "https://xxx",
      "ttl": "METRO  TV"
    }
  ]
};

错误原因分析 #

1. GitHub文件格式错误：当前文件是JS变量声明，不是纯JSON格式，$.getJSON只能解析标准JSON，无法识别var data =和末尾的分号。
2. $.getJSON参数用法错误：第二个参数应为请求参数（可选），而非目标数据对象；回调函数参数顺序颠倒，正确顺序是先接收返回的完整数据，再处理遍历项。
3. HTML拼接引号错误：代码中使用了"转义字符导致标签闭合异常，应直接使用双引号。

修正方案 #

步骤1：修正GitHub上的JSON文件格式 #

将文件内容改为纯JSON，移除var data =和末尾的分号：

{
  "items": [
    {
      "src": "https://xxx",
      "url": "https://xxx",
      "ttl": "METRO  TV"
    }
  ]
}

步骤2：修正$.getJSON代码 #

$.getJSON('https://raw.githubusercontent.com/user/lokal.json', function(response) {
  // 遍历返回数据中的items数组
  $.each(response.items, function(i, f) {
    // 正确拼接HTML标签，确保引号闭合
    $('ul').append('<li class="scroll-nav"><a href="' + f.url + '"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></a></li>');
  });
});

关键修正点说明 #

• 移除$.getJSON的第二个冗余参数，仅保留URL和回调函数。
• 回调函数接收完整的返回数据response，再通过$.each遍历response.items。
• 修正HTML拼接中的引号问题，使用正常双引号确保标签结构合法。

内容的提问来源于stack exchange，提问作者Muhamad Firzi Rabbani