how to write directly on html file some data from a variable

Question

So i dont know how to ask this but i wanted to make a way to put info from a variable directly into an html file

so i have a js file like this

    const list = {
        "list1": [
            {
                "records": [
                    {
                        "user": "Someone",
                        "link": "link"
                    },
                    {
                        "user": "Someone 2",
                        "link": "link"                 
                    },
                ],
                
                /////////////////////////////

                "name": "SOMETHING",
                "author": "someone",
                "id": 12345678,
                "vid": "link",
                "iframe": "link"

                /////////////////////////////
            },

and that info from records so like list.list1[0].user and to make that string direcly appear on an html file and when clicking it it opens the "link" without using a function for every of those string

html looks like

so i dont want to insert document.getElementById('record1x2').innerText = shitty.list[0].records[0].user + " | " + shitty.list[0].records[0].hz; and

for every string and i want something that directly write it and i something that automatically opens the link "link": "link" on a new tab without using a function like

function video1x2() {
    window.open(shitty.list[0].records[0].link);
}

i dont really know how to explain this thing but i just want not to copy and paste the same code to write all of those "records" but to use a single code that automatically do it, same for the link to open.

I hope you can understand a little bit at least what i want.

The final result should be like i add a line to "records" so i just add

{
                        "user": "Someone 3",
                        "link": "link"                 
                    },

and it write on the html.

Thanks :)

const list = {
        "list1": [
            {
                "records": [
                    {
                        "user": "Someone",
                        "link": "link"
                    },
                    {
                        "user": "Someone 2",
                        "link": "link"                 
                    },
                ],

                /////////////////////////////

                "name": "SOMETHING",
                "author": "someone",
                "id": 12345678,
                "vid": "link",
                "iframe": "link"

                /////////////////////////////
            },

user_10606400 · Answer

You can loop through records json array using $.each loop and then generate p tags inside this loop with user and link then append this generated html inside your records div

Demo Code :

const list = {
  "list1": [{
    "records": [{
        "user": "Someone",
        "link": "link1"
      },
      {
        "user": "Someone 2",
        "link": "link2"
      },
      {
        "user": "Someone 3",
        "link": "link3"
      }, {
        "user": "Someone 4",
        "link": "link4"
      }
    ],
    "name": "SOMETHING",
    "author": "someone",
    "id": 12345678,
    "vid": "link",
    "iframe": "link"

  }]
}

$('#levelname').text(list.list1[0].name);
$('#levelauthor').text(list.list1[0].author);
$('#levelid').text("ID: " + list.list1[0].id);
$('iframe1').attr('src', list.list1[0].iframe);

var html = "";
//loop through records json array
$.each(list.list1[0].records, function(i, vv) {
  //if `i` value is even one class or other.. 
  var class_name = i % 2 == 0 ? "recordd2" : "recordd"
  //append link and user name
  html += `${vv.user}
   `
})

$(".records").append(html) //append p in div

.recordd2 {
  background-color: blue;
}

.recordd {
  background-color: pink;
}

how to write directly on html file some data from a variable

1 Answers