I have this for loop

<script>
...
for(i = 0;i < json.length;i++){      
  document.getElementById("pText").innerHTML = json[i].name;
  document.getElementById("pLink").setAttribute("href",json[i].html_url);
}
</script>

I want to print a paragraph with a href on each loop, so i did this:

</script>

<a id="pLink">
   <p id="pText">
   </p>
</a>

It works but the thing is this only prints the last loop. So i tried this inside the script

document.write("<a href=\"" + json[i].html_url + "\">");
document.write("<p>" + json[i].name + "</p>");
document.write("</a>");

instead of this:

document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);

And it prints everything i want but it replaces the whole page. How can i do this? Do i need to create an id for every loop? Like "pText1, pText2, etc.

I have this for loop

<script>
...
for(i = 0;i < json.length;i++){      
  document.getElementById("pText").innerHTML = json[i].name;
  document.getElementById("pLink").setAttribute("href",json[i].html_url);
}
</script>

I want to print a paragraph with a href on each loop, so i did this:

</script>

<a id="pLink">
   <p id="pText">
   </p>
</a>

It works but the thing is this only prints the last loop. So i tried this inside the script

document.write("<a href=\"" + json[i].html_url + "\">");
document.write("<p>" + json[i].name + "</p>");
document.write("</a>");

instead of this:

document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);

And it prints everything i want but it replaces the whole page. How can i do this? Do i need to create an id for every loop? Like "pText1, pText2, etc.

• javascript
• html

Share Improve this question Follow asked Nov 25, 2017 at 0:15 P_FerreiraP_Ferreira 47311 gold badge66 silver badges2323 bronze badges 1

• Please, create a snippet or a jsfiddle – P.S. Commented Nov 25, 2017 at 0:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Create a container element for that loop, and add the html as you had in mind

<div id="container"></div>

Then in javascript

var container = document.getElementById('container');
var my_html = '';
for(var i = 0;i < json.length;i++){  
  my_html += '<a href="' + json[i].html_url + '\">';
  my_html += '<p>'+  json[i].name + '</p>'
  my_html += '</a>'
}
container.innerHTML = my_html;

What we are doing here is adding the content to a string as many times as needed and then add it to the container so it already has all the loops

document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);

If you want to use your this code, you have to write "+=" instead of the "=".

var json = [
  {"name":"Name 1", "html_url": "http://www.example."},
  {"name":"Name 2", "html_url": "http://www.example."},
  {"name":"Name 3", "html_url": "http://www.example."}
];
for(var i = 0; i < json.length; i++){
  document.getElementById("pText").innerHTML += json[i].name + "<br>";
  document.getElementById("pLink").setAttribute("href",json[i].html_url);
}

<a id="pLink">
   <p id="pText">
   </p>
</a>

I will do it in the following way:

let json = [{'name':'Google','html_url':'https://www.google./'}, {'name':'Facebook','html_url':'https://www.facebook./'}, {'name':'Twitter','html_url':'https://twitter./?lang=en'}];

let item = document.querySelector(".pLink")
for(let j = 1; j<json.length; j++){
	let cln = item.cloneNode(true);
	document.body.appendChild(cln);
}

let aTag = document.querySelectorAll('a.pLink');
aTag.forEach(function(item, i){
	let a = item.setAttribute("href",json[i].html_url);
	let p = item.querySelector('.pText');
	p.innerHTML = json[i].name;

})

<a class="pLink">
   <p class="pText">
   </p>
</a>