温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Cannot convert json to html list using jquery
jquery json

其他 - 无法使用jQuery将JSON转换为HTML列表

发布于 2020-03-27 11:28:15

我想将服务器收到的搜索结果转换为无序列表:

function searchSuccess(json, textStatus, jqXHR) {
  console.log('json is:', json);
  var html= "<ul>";
  Object.keys(json).forEach(function(key, val) { 
    html += "<li><a href=\'" + val['slug'] + "\'>" + val['title'] +"</a></li>";    
  });
  html +="</ul>"
  $('#search-results').append(html);
}

我在控制台中看到的json是这样的:

json is: [{"title":"Hello World","slug":"hello-world"},{"title":"I'm a title","slug":"I-am-title"}]

但是,呈现liundefined列表的替代链接的

怎么了 我该如何解决?

查看更多

查看更多

提问者
grhn
被浏览
145
Mark Baijens 2019-07-03 23:20

您在json中有一个带有javascript对象的数组列表。这些代码有效:

  • 稍微调整一下代码:

var json = '[{"title":"Hello World","slug":"hello-world"},{"title":"I\'m a title","slug":"I-am-title"}]';

function searchSuccess(json) {
  console.log('json is:', json);
  var html= "<ul>";
  jsonObject = JSON.parse(json);
  
  jsonObject.forEach(function(searchresult) { 
    html += "<li><a href=\'" + searchresult.slug + "\'>" + searchresult.title +"</a></li>";    
  });
  html +="</ul>"
  $('#search-results').empty().append(html);
}

searchSuccess(json);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-results"></div>
  • 更好的jQuery方式:

var json = '[{"title":"Hello World","slug":"hello-world"},{"title":"I\'m a title","slug":"I-am-title"}]';

function searchSuccess(json) {
  var $ul = $('<ul>');
  jsonObject = JSON.parse(json);
  
  jsonObject.forEach(function(searchresult) {
    var $li = $('<li>');
    var $a = $('<a>');
    $a.attr('href', searchresult.slug)
    $a.text(searchresult.title);
    $li.append($a);
    $ul.append($li);
  });
  $('#search-results').empty().append($ul);
}

searchSuccess(json);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-results"></div>