为何我的JSON Ajax请求无法渲染项目信息到HTML？

架构老林

2026-8-15

问题分析与解决方案

你这段代码里有几个关键错误导致内容无法渲染：

1. 循环未取数组单个元素

你在循环里直接用proyectos.id、proyectos.fecha，但proyectos是数组，得用proyectos[i]获取当前循环的项目对象，比如proyectos[i].id。

2. 重复ID属性

循环生成的每个项目模块都用了相同ID（比如idProyecto、fechaProyecto），页面中ID必须唯一，建议改成class或者直接去掉（如果不需要单独操作这些元素）。

3. HTML语法错误

linkProyecto里多了一个闭合</p>标签，会导致HTML解析异常。

修复后的代码

var proyectos;

$(document).ready(function (){
  $.ajax({
    url:'http://127.0.0.1:5501/info.json'
  }).done(function(resultado){
    proyectos = resultado.proyectos;
    var htmlProyectos = ''
    for (var i=0; i < proyectos.length; i++){
      // 获取当前循环的项目
      var proyecto = proyectos[i];
      htmlProyectos +=`
      <h1>lorem ipsum doloris ameris</h1>
      <div class='contenedorPrincipal col-6 my-5 p-2 border rounded bg-white'>
      <div class='row'>
          <div class='col-6 text-left'>ID: ${proyecto.id}</div>
          <div class='col-6 text-right'>${proyecto.fecha}</div>
      </div>
      <div class='row'>
          <div class='col-12 text-center'><h1>${proyecto.nombre}</h1></div>
          <div class='col-12 text-center'><p>${proyecto.descripcion}</p></div>
          <div class='col-12 text-center text-primary'><p>${proyecto.link}</p></div>
      </div>
    </div>
      `
    }
    document.getElementById('proyectos').innerHTML = htmlProyectos
  })
  // 加错误处理排查请求问题
  .fail(function(err){
    console.error('请求失败:', err);
  });
});