Fill a table according to other cells with js

Question

I'm trying to fill a html table according to the left cells of that table.

So this code below creates a table which is filled by variables :

<table id="myTable" ></table>
    <script>

        var rightcell = [{name : "Name2", carac: "N2"},{name : "Name8", 
        carac: "N8"},{name : "Name5", carac: "N5"}]
        setName = rightcell.map(a => a.name);
        setCarac = rightcell.map(a => a.carac);


        var cellobj;

        for (var j = 0; j < 10; j++) {
            arr2 = [
                "Name1" ,"Name2","Name3" ,"Name4","Name5" ,"Name6","Name7" ,"Name8","Name9" ,"Name10"
                ];



            var table = document.getElementById("myTable");
            var row = table.insertRow(j);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);

            cell1.innerHTML = arr2[j]

        }
        $('myTable').find('td').each(function () {

                if (setName[j] == arr2[j]) {
                 cell2.innerHTML = setCarac[j]
                 }
                else {
                cell2.innerHTML = "nothing"
            }

            })
    </script>

I've also tried to loop in the array but with no success :

    <script>

        var rightcell = [{name : "Name2", carac: "N2"},{name : "Name8", carac: "N8"},{name : "Name5", carac: "N5"}]
        setName = rightcell.map(a => a.name);
        setCarac = rightcell.map(a => a.carac);


        var cellobj;

        for (var j = 0; j < 10; j++) {
            arr2 = [
                "Name1" ,"Name2","Name3" ,"Name4","Name5" ,"Name6","Name7" ,"Name8","Name9" ,"Name10"
                ];



            var table = document.getElementById("myTable");
            var row = table.insertRow(j);
            var cell1 = row.insertCell(0);

            var cell2 = row.insertCell(1);

            cell1.innerHTML = arr2[j]



            arr2.forEach(function() {
              if (setName[j] == arr2[j]) {
       cell2.innerHTML = setCarac[j]
            }
            else {
                cell2.innerHTML = "nothing"
            }

            })


        }
    </script>

What I want is for every left cell to check if the right one have the same name in the array of object rightcell and print the carac accordingly.(N1 should be next to Name1 and so on).

Any idea ? Thanks for the help.

Answer 1

Your code has a lot of errors like using arr2 / cell2 outside of their scopes, not using # for getting id etc. Take a look at the working code:

This works:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<table id="myTable"></table>
<script>
  var rightcell = [{
    name: "Name2",
    carac: "N2"
  }, {
    name: "Name8",
    carac: "N8"
  }, {
    name: "Name5",
    carac: "N5"
  }];

  var rightCellMap = {};
  for (var index = 0; index < rightcell.length; index++) {
    rightCellMap[rightcell[index].name] = rightcell[index].carac;

  }

  arr2 = [
      "Name1", "Name2", "Name3", "Name4", "Name5", "Name6", "Name7", "Name8", "Name9", "Name10"
    ];

  for (var j = 0; j < 10; j++) {

    var table = document.getElementById("myTable");
    var row = table.insertRow(j);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    cell1.innerHTML = arr2[j]
  }

  $('#myTable').find('tr').each(function (index, element) {

    var firstTd = $(element).find('td:first')[0];

    var firstTdData = firstTd.innerHTML;

    if (firstTdData != '' && rightCellMap[firstTdData]) {
      firstTd.nextSibling.innerHTML = rightCellMap[firstTdData];
    } else {
      firstTd.nextSibling.innerHTML = "nothing"
    }

  })

</script>