如何从async fetch调用Python接口返回的JSON中提取title与url值？

前端请求代码 #

const [response, asxAnnouncement] = await Promise.all([
  fetch("/callback/getStock?data=" + Stock + "&period=" + Interval),
  fetch("/callback/getAsxAnnouncement?data=" + Stock)
]);

if (asxAnnouncement.ok) {
  var asx_announcement_response = await asxAnnouncement.json();
  var jsonObj = JSON.stringify(asx_announcement_response);
  console.log(jsonObj);
}

后端Python响应代码 #

companyAnnouncement = pyasx.data.companies.get_company_announcements(stock)
return jsonify({'companyAnnouncement': companyAnnouncement})

返回的JSON结构 #

{
  "companyAnnouncement": [
    {
      "document_date": "Mon, 30 Oct 2023 21:01:27 GMT",
      "num_pages": 12,
      "release_date": "Mon, 30 Oct 2023 21:20:28 GMT",
      "size": "782.9KB",
      "title": "Quarterly activities report and Appendix 4C - September 2023",
      "url": "https://announcements.asx.com.au/asxpdf/20231031/pdf/05wr5p029g0ydw.pdf"
    },
    {
      "document_date": "Wed, 25 Oct 2023 22:41:58 GMT",
      "num_pages": 35,
      "release_date": "Wed, 25 Oct 2023 22:46:42 GMT",
      "size": "10.4MB",
      "title": "Annual General Meeting presentation",
      "url": "https://announcements.asx.com.au/asxpdf/20231026/pdf/05wjbq1nn2c09q.pdf"
    },
    {
      "document_date": "Wed, 20 Sep 2023 04:13:42 GMT",
      "num_pages": 1,
      "release_date": "Wed, 20 Sep 2023 04:24:46 GMT",
      "size": "167.6KB",
      "title": "Cann to supply additional flower products to key customer",
      "url": "https://announcements.asx.com.au/asxpdf/20230920/pdf/05v2xpwm4vxst1.pdf"
    },
    {
      "document_date": "Sun, 29 Jan 2023 22:24:35 GMT",
      "num_pages": 9,
      "release_date": "Sun, 29 Jan 2023 22:26:23 GMT",
      "size": "415.7KB",
      "title": "Quarterly Activities and Appendix 4C Cashflow Report",
      "url": "https://announcements.asx.com.au/asxpdf/20230130/pdf/45l1qkcn9b25bn.pdf"
    }
  ]
}

尝试的提取代码（存在问题） #

$.each(asx_announcement_response, function(index, val) {
    console.log(val);
     tab += `<li style="padding-bottom:5px;"><a class="pluslink" href="${val.url}}">${val.title}</a></li>`;
}
document.getElementById("asxAnnouncement").innerHTML = tab;

问题原因 #

1. 结构层级错误：返回的JSON里，公告数组嵌套在companyAnnouncement字段下，你直接遍历外层对象asx_announcement_response，导致val拿到的是整个外层对象，而非数组里的单个公告项。
2. 语法错误：$.each未闭合括号，模板字符串中href="${val.url}}"多了一个闭合大括号，会导致URL拼接异常。

修正后的代码 #

jQuery版本 #

// 先获取真正的公告数组
const announcements = asx_announcement_response.companyAnnouncement;
let tab = ''; // 确保tab初始化为空字符串

$.each(announcements, function(index, val) {
    console.log(val.title, val.url); // 现在能正确打印内容
    tab += `<li style="padding-bottom:5px;"><a class="pluslink" href="${val.url}">${val.title}</a></li>`;
}); // 闭合$.each的括号

document.getElementById("asxAnnouncement").innerHTML = tab;

原生JS版本（无需jQuery） #

const announcements = asx_announcement_response.companyAnnouncement;
let tab = '';

announcements.forEach(val => {
    tab += `<li style="padding-bottom:5px;"><a class="pluslink" href="${val.url}">${val.title}</a></li>`;
});

document.getElementById("asxAnnouncement").innerHTML = tab;

内容的提问来源于stack exchange，提问作者mylottofinder.com.au