Put JSON data into HTML elements - html

Question

I want to put values from a JSON object into HTML elements.
If I break this down into steps, I think I know the first two steps, but then I am lost
get the html elements into javascript objects using a loop and selectors
get the values of the JSON properties one by one using a for...in loop
...
I am already at a stumbling block in step 1, as I don't know how to select by ID when iterating over the set of elements.
I would like help to understand the steps I need to define for this task, as well as any advice about which functions to use.
This is the JSON :
var sonnet_1 = {
line_1 : "FROM fairest creatures we desire increase",
line_2 : "That thereby beauty\'s rose might never die",
line_3 : "But as the riper should by time decease,",
line_4 : "His tender heir might bear his memory\:", }
Here is the HTML:
<p id = "1"></p>
<p id = "2"></p>
<p id = "3"></p>
<p id = "4"></p>
Step 1 ) I have tried this
First, tested a single query
document.getElementById('1');
OK. output: <p id ="1"></p>
for (i= 0; i< 14 ; i++) {
var line = document.getELementById('i');
console.log(line);
}
I am expecting output:
<p id ="1"></p>
<p id ="2"></p>
...
But instead this doesn't log anything.
Step 2)
Tried this :
console.log(`${sonnet_1[line]}`);
Output: FROM fairest creatures we desire increase
All good!
Then this:
for (line in sonnet_1) {
console.log(`${sonnet_1[line]}`);
}
Again all good.
Output:
FROM fairest creatures we desire increase
That thereby beauty's rose might never die
But as the riper should by time decease,
His tender heir might bear his memory:
Then this:
for (line in sonnet_1) {
document.getElementById(`${line}`).innerHTML = `${sonnet_1[line]}`;
}
No luck.
I think I need an embedded loop. Is this correct?

Answer 1

Before going to js put a div with id, lets id="div";
let x;
for (i in sonnet_1) {
x += '<p>' + sonnet_1[i] + '</p>';
}
document.getElementById("div").innerHTML = x;

Answer 2

You are on the right direction.
let i = 1;
for (line in sonnet_1) {
// console.log(i++, sonnet_1[line]);
document.getElementById(`${i++}`).innerHTML = `${sonnet_1[line]}`;
}
If you want to create dynamic list of 'p' elements over the JSON object, try this:
let i = 1;
let htmlStr = '';
for (line in sonnet_1) {
htmlStr = htmlStr + `<p id='${i}'>${sonnet_1[line]}</p>`
}
console.log(htmlStr);
DEMO