clone of HTML tables of data

Question

Need help to refactor this code to look like its done by a pro. Or just put some advice or links to useful stuff.

The idea is to clone a div with two empty tables for two separate arrays of data. div is cloned depending on the longest array length between the two. Then append row of data to them, if rows reach max number the loop continues on another cloned table. loop continues even if the one row is finished appending

<div id="d-page-0">
    <table id="e-tbl-0">
        //content1
        //7 row max
    </table>

    <table id="w-tbl-0">
        //content2
        //21 row max
    </table>
</div>

Javascript part

let d1 = @json($data1); //get data
let d2 = @json($data2); //get data

let ar1 = [];
let ar2 = [];
let s = 0;

for (let i = 7; i < d1.length; i+=7) {
    ar1.push(d1.slice(i, i+7));           //slice data 1
}

for (let i = 21; i < d2.length; i+=21) {
    ar2.push(d2.slice(i, i+21));          //slice data 2
}

ar1.length > ar2.length ? s = ar1.length : s = ar2.length; //take longest array length

for (let v = 0; v < s-1; v++) { //clone div using longest array length
     $("#d-page-0").clone().prop("id", "d-page-"+(v+1)).insertAfter("#d-page-"+v); //clone div, edit id
     $("#d-page-"+(v+1)).find("#e-tbl-0", "table").prop("id", "e-tbl-"+(v+1)); //edit 1st tbl id
     $("#d-page-"+(v+1)).find("#w-tbl-0", "table").prop("id", "w-tbl-"+(v+1)); //edit 2nd tbl id
}

//append 1st data to 1st table
 for (let x = 0; x < ar1.length; x++) {
      let k = ar1[x];
      for (let y = 0; y < k.length; y++) {
           $('#e-tbl-'+x).append(
                `<tr>
                    <td>
                      ar1[x][y].content        
                    </td>
                 </tr>`
            );
      }
}

//append 2nd data to 2nd table
 for (let x = 0; x < ar2.length; x++) {
      let k = ar2[x];
      for (let y = 0; y < k.length; y++) {
           $('#w-tbl-'+x).append(
                `<tr>
                    <td>
                      ar1[x][y].content        
                    </td>
                 </tr>`
            );
      }
}

working sample https://jsfiddle.net/eeneg/pgk3dhac/57/

Answer 1

I've refactored your code below to add some of the repetitive items into functions and tried to improve your variable names a little.

The new variable names and function names should clearly indicate their intended purpose/data.

A rule of thumb worth remembering is the concept of DRY (Do not Repeat Yourself).

const createArraywithJsonData = function(count, data) {
    let array = [];
    
    for (let i = count; i < data.length; i += count) {
        array.push(data.slice(i, i + count));
    }
    
    return array;
}

const editTableId = function(selector, counter) {
    $(`#d-page-${(counter+1)}`).find(`#${selector}-0`, "table").prop("id", `${selector}-${(counter+1)}`);
}

const appendDataToTable = function(array, property, selector) {
    for (let x = 0; x < array.length; x++) {
        let k = array[x];

        for (let y = 0; y < k.length; y++) {
            $(`#${selector}-${x}`).append(`<tr><td>${array[x][y][property]}</td></tr>`);
        }
    }
}

let d1 = [
    {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }, {
        a: "1"
    }
];
let d2 = [
    {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }, {
        b: "2"
    }
];

let ar1 = createArraywithJsonData(7, d1);
let ar2 = createArraywithJsonData(21, d2);
let longestArrayLength = ar1.length > ar2.length ? ar1.length : ar2.length;


for (let v = 0; v < longestArrayLength - 1; v++) { //clone div using longest array length
    $("#d-page-0").clone().prop("id", `d-page-${(v + 1)}`).insertAfter(`#d-page-${v}`); //clone div, edit id
    editTableId('e-tbl', v);
    editTableId('w-tbl', v);
}

appendDataToTable(ar1, 'a', 'e-tbl');
appendDataToTable(ar2, 'b', 'w-tbl');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  </head>

  <body bgcolor="#A0A0A0" vlink="blue" link="blue">
    <div id="d-page-0">
        <table id="e-tbl-0">
            <tr><th>tbl1</th></tr>
        </table>

        <table id="w-tbl-0">
            <tr><th>tbl2</th></tr>
        </table>
    </div>
  </body>
</html>