使用 JQuery 将 JSON 数组放入 HTML 列表

Posted 2023-05-09

技术标签:

【中文标题】使用 JQuery 将 JSON 数组放入 HTML 列表【英文标题】：Using JQuery to put a JSON array into a HTML list 【发布时间】：2021-08-04 21:38:03 【问题描述】：

我有一个 JSON 文件，它将一些数据存储为对象数组：


  "projects": [
    
        "title": "title0",
      "content": "content0"
    ,
    
      "title": "title1",
      "content": "content1"
    ,
    
      "title": "title2",
      "content": "content2"
    
  ]

我正在使用 JQuery 尝试将这些一个接一个地放入一个列表中：

$.getJSON("projects.json", function( data ) 
    console.log(typeof jsondataect);
    var features = document.getElementById('featuredProjects');
    var ul = document.createElement('ul');
    for (var i = 0; i < data.length; ++i) 
      var li = document.createElement('li');
    $('li').html(data[i].content);
      ul.appendChild(li);                                 
    
    features.appendChild(ul);  
);

但这会在我的文档中生成一个空的 HTML 列表。我希望 HTML 像这样列出 JSON 数组的元素：

<div>
    <ul>
        <li>title0</li>
        <li>content0</li>
        <li>title1</li>
        <li>content1</li>
        <li>title2</li>
        <li>content2</li>
    </ul>
</div>

我做错了什么？

【问题讨论】：

在 for 循环中将“data.length”替换为“data.projects.length”应该可以解决问题。而且，您需要一个 id 名称为“featuredProjects”的 HTML 元素，因为您通过 id 获取元素而不是创建新元素。 【参考方案1】：

您的主要问题是您试图循环通过 data，这只是一件事 - 一个名为 projects 的对象。您需要遍历data.projects，包括在for() 中使用data.projects.length。此外，您已经在常规 javascript 中完成了大部分工作，除了一行 $('li')... 那是 jQuery，所以我将其更改为常规 JS。但是自从这条线之后它无论如何都不会起作用

$('li').html(data[i].content);

是说'查找页面上的每个<li> 元素并将其内部文本更改为data[i].content。我将其更改为仅使用您之前所做的li 引用，并使用innerHTML 而不是$(id).html()

最后，我在你的标题中看到，你想在 jQuery 中执行此操作。所以我添加了第二个循环来展示如何做到这一点。

window.onload = () => 
  var data = 
    "projects": [
        "title": "title0",
        "content": "content0"
      ,
      
        "title": "title1",
        "content": "content1"
      ,
      
        "title": "title2",
        "content": "content2"
      
    ]
  



  var features = document.getElementById('featuredProjects');
  var ul = document.createElement('ul');
  for (var i = 0; i < data.projects.length; ++i) 
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML = data.projects[i].title;

    li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML = data.projects[i].content;


  
  features.appendChild(ul);
  
  
  // here's the jQuery way
  // Also showing a different way that you can loop through an array 
  let new_ul=[];
  data.projects.forEach( obj => 
   new_ul.push("<li>"+obj.title+"</li>");
   new_ul.push("<li>"+obj.content+"</li>")
  )
  // join all the li's 
   $('#featuredProjectsJQ').html("<ul>" + new_ul.join("") + "</ul>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body><h3>Regular JS</h3>
  <div id='featuredProjects'></div>
  
  <h3>jQuery JS</h3>
  <div id='featuredProjectsJQ'></div>
</body>

</html>

【讨论】：

以上是关于使用 JQuery 将 JSON 数组放入 HTML 列表的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery 将 JSON 发送到服务器