html javascript list json data in <ul> <li>

Asked

Viewed 818 times

0

Staff I ask for a help from friends:

the code makes an ajax request to take data from an api (json) and pass through all objects within the array

my json= [{Name:"Ajato 2000"}, {Name:"Crystal I"} ]

in the case how do I list or print the data with html using a list attribute I know how to do this with php more with html I know what and type like

Document.getElementById('display'). value;

<!DOCTYPE html>
<html>
<body>



<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<script>
$.ajax({
  type: "POST",
  dataType: "json",
  url: "https://coarinet.com/kibarcos/api",
  success: function(data) {


   
  for (var i in data) { 

  Nomes= data[i]["Nome"];

}



  }
});
</script>
	
<p id="id_nome"></p>
</body>
</html>

javascript html jquery
  • 2

    Kindly, friend, reread your question and ask yourself if it is possible to understand clearly what you want. We are here to really help, but the question is so lacking in information that it makes an objective answer unfeasible. Maybe I’ll even get an answer, but I’m sure they’ll debate a lot in the comments until you know what you really wanted, and this could have been reported in the question itself.

  • Did I change that now it got better ? ... I personally apologize a thousand apologies for the interpretation

  • for(x in data){ document.getElementById('id_' + data[x]).innerHTML = data[x] }, so it should work, but your answer is very vague. Put your JSON

  • I’ve changed my json to get better people understand

  • @kibarconet take a look at my answer, she managed to solve her problem?

1 answer

1


From what I understand you will receive a JSON object and want to display it within a list, correct?

So you can do something like.

let nomes = document.getElementById('nomes')
const listaNomes = [
  { nome: 'Eduardo' },
  { nome: 'José' },
  { nome: 'Ribeiro' },
  { nome: 'Soares'}
]

listaNomes.forEach(obj => {
  nomes.innerHTML += `<li>${ obj.nome }</li>`
})
<ul id="nomes"></ul>

Explaining a little, create a tag ul with a id any, in case I put as nomes.

I assumed that the JSON you receive is something like listaNomes, then in it just create a repeat loop, could be for, while, map and so on, but I chose the forEach and then just use the innerHTML in the ul, that it will inject the code into your tag.

Obs: ${} -> is a new Javascript feature known as template string, that is nothing more than a way to concatenate strings. You can know more HERE

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.