Cannot convert json to html list using jquery

Question

I'd like to convert a search result received from server to unordered list:

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);
}

The json, as I see in the console is like:

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

However, instead of the linked li , a list of undefined is rendered.

What is wrong here? How can I fix it?

console.log(key, val) in your forEach and take a look at what they actually are. (val here is going to be an index) — Taplar
– Taplar, Commented Jul 3, 2019 at 14:48
Also it's unclear from your post if json is already parsed or if it is still in string format. — Taplar
– Taplar, Commented Jul 3, 2019 at 14:50
@Taplar the json is received from server. Not sure what you mean at the first comment. — grhn
– grhn, Commented Jul 3, 2019 at 14:55
I mean, literally, the first thing you should do if something isn't working like you expect it to, is to console log the values you are working with and verify that they are what you expect they are. If they are not, then you have your first step towards figuring out on your own what the problem is. Addendum: and given that the syntax for the callback for forEach is function(element, index), trying to do val[key] is a quick issue to spot — Taplar
– Taplar, Commented Jul 3, 2019 at 14:56

Mark Baijens · Accepted Answer · 2019-07-03 15:20:09Z

2

You had an array list with javascript object in your json. These codes works:

Little adjustment to your code:

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>

Nicer jQuery way:

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>

edited Jul 3, 2019 at 15:20

answered Jul 3, 2019 at 14:54

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

grhn Over a year ago

This fixes undefined, but the problem is that it append ANYTHING that comes from the server after each key up. Is there any way to filter out only for the latest searchresult?

Mark Baijens Over a year ago

Or if you want to clear the div before appending new you can replace $('#search-results').append(html) with $('#search-results').empty().append(html)

grhn Over a year ago

Thanks Mark, but this still adds up to results. What I mean is to eliminate the previous (irrelevant) result sets, and show the latest set which matches the search term. The function that sends out values is here: stackoverflow.com/questions/56868810 /form-input-field-not-recognized-in-jquery

Mark Baijens Over a year ago

Added my answer again, added the empty() function to clear the div before appending new content.

Rack Sinchez · Accepted Answer · 2019-07-03 15:03:52Z

0

You can use a for loop and iterate through the json object like so (based on the json you specified being an object instead of a string):

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

for (var key in json) {
  console.log(json[key]);
  console.log(json[key]['slug']);
  console.log(json[key]['title']);
}

You can either specify your json as an object, or parse it from a string to an object like so:

jsonObject = JSON.parse(jsonString);

answered Jul 3, 2019 at 15:03

Rack Sinchez

1113 bronze badges

Collectives™ on Stack Overflow

Cannot convert json to html list using jquery

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related