如何让按钮onclick事件调用JSON数组中存储的API完整报道链接

前置问题修正 #

首先你提供的JSON返回示例存在两处语法问题，需要服务端返回时修正，否则前端解析会报错：

• title字段末尾缺少英文逗号
• url字段值缺少http://或https://协议头，直接调用window.open会被识别为当前站点的相对路径，导致跳转错误

核心实现逻辑 #

你当前的代码固定读取data.news[0].url，只能跳转第一条新闻的链接。要实现动态适配不同新闻的跳转，只需要在渲染对应新闻的按钮时，把当前新闻的URL或者对应数组索引作为参数传入点击函数即可：

1. 传URL参数方案（更稳妥） #

动态渲染的HTML示例

循环生成新闻列表时，直接把对应新闻的url传入函数：

<!-- 第一条新闻的按钮 -->
<button onclick="newWindow('https://www.newsnetwork.com/soccer-team-wins-the-world-cup')">查看完整报道</button>
<!-- 第二条新闻的按钮 -->
<button onclick="newWindow('https://www.newsnetwork.com/xxx')">查看完整报道</button>

对应JS代码

function newWindow(targetUrl){
  // 增加非空校验避免报错
  if(targetUrl) {
    // 第二个参数_blank强制新标签页打开，可根据需求调整
    window.open(targetUrl, '_blank')
  }
}

2. 传数组索引方案 #

如果不想在HTML里写完整URL，也可以传对应新闻在news数组里的索引，前提是接口返回的data对象全局可访问：

HTML示例

<button onclick="newWindow(0)">查看第一条完整报道</button>
<button onclick="newWindow(1)">查看第二条完整报道</button>

对应JS代码

function newWindow(newsIndex){
  // 可选链操作符避免索引越界报错
  const targetUrl = data.news?.[newsIndex]?.url
  if(targetUrl) {
    window.open(targetUrl, '_blank')
  }
}

内容的提问来源于stack exchange，提问作者user16645351