I need to create a simple table using JavaScript based on an array with nested objects, which should have only two columns. In the first cell of the first column of the table, the Processor header is specified, after which the corresponding processor models are written to the lower cells. In the first cell of the second column, the Processor frequency header is indicated, after which the frequencies are written to the lower cells. I was able to generate code for this task, but it doesn’t work correctly. Instead of writing keys to column cells after the first iteration, for some reason, it takes into account unnecessary objects. That’s why you get an undefined value in the table headers and a re-duplication. Please tell me how to solve this problem.

let processorFrequency = [
    {
        titleOne : 'Processor', values : [
            {name : '80386LC (1988г.)'},
            {name : '80486DX4 (1994г.)'},
            {name : 'Pentium MMX (1997г.)'},
            {name : 'Pentium II (1998г.)'},
            {name : 'Pentium III (1999г.)'},
            {name : 'Pentium IV'},
            {name : 'Athlon-Athlon XP'},
            {name : 'Athlon 64'},

        ]
    },
    {
        titleTwo : 'Processor frequency', values : [
            {name : '33-60'},
            {name : '80-133'},
            {name : '160-233'},
            {name : '260-550'},
            {name : '300-1400'},
            {name : '1600-3800'},
            {name : '1400-3200'},
            {name : '2600-3800'},
        ]
},
]



function Test(){
    let table = document.getElementsByTagName('table')[0];
    for (let i = 0; i < processorFrequency.length; i++) {
        var pf = processorFrequency[i];
        let tableRow = document.createElement('tr');
        let tdOne = document.createElement('td');
        let tdTwo = document.createElement('td');
        let txtOne = document.createTextNode(pf.titleOne);
        let txtTwo = document.createTextNode(pf.titleTwo);
        
        tdOne.className = 'head';
        tdTwo.className = 'head';

        tdOne.appendChild(txtOne);
        tdTwo.appendChild(txtTwo);

        tableRow.appendChild(tdOne);
        tableRow.appendChild(tdTwo);
        table.appendChild(tableRow);

        var values = pf.values;
        for (let j = 0; j < values.length; j++) {
            let value = values[j];
            let tableRow = document.createElement('tr');
            let td = document.createElement('td');
            let txt = document.createTextNode(value.name);
            td.appendChild(txt);
            tableRow.appendChild(td);
            table.appendChild(tableRow);
        }
    }
} 

Test();

table td, table th {
  border: 1px solid black;
  padding: 5px;
}

<table><!-- Contents will be created via JavaScript -->
</table>

>Solution :

Seems like the issue is that you are creating a new row for each processor AND frequency value, which results in extra rows being added to the table. The correct way should be create a single row for each processor, with two cells (one for the processor model and one for the processor frequency):

let processorFrequency = [
    {
        titleOne: 'Processor', values: [
            { name: '80386LC (1988г.)' },
            { name: '80486DX4 (1994г.)' },
            { name: 'Pentium MMX (1997г.)' },
            { name: 'Pentium II (1998г.)' },
            { name: 'Pentium III (1999г.)' },
            { name: 'Pentium IV' },
            { name: 'Athlon-Athlon XP' },
            { name: 'Athlon 64' },
        ]
    },
    {
        titleTwo: 'Processor frequency', values: [
            { name: '33-60' },
            { name: '80-133' },
            { name: '160-233' },
            { name: '260-550' },
            { name: '300-1400' },
            { name: '1600-3800' },
            { name: '1400-3200' },
            { name: '2600-3800' },
        ]
    },
];

function Test() {
    let table = document.getElementsByTagName('table')[0];

    for (let i = 0; i < processorFrequency[0].values.length; i++) {
        let tableRow = document.createElement('tr');
        
        // Processor Name Cell
        let tdOne = document.createElement('td');
        let txtOne = document.createTextNode(processorFrequency[0].values[i].name);
        tdOne.appendChild(txtOne);
        tableRow.appendChild(tdOne);

        // Processor Frequency Cell
        let tdTwo = document.createElement('td');
        let txtTwo = document.createTextNode(processorFrequency[1].values[i].name);
        tdTwo.appendChild(txtTwo);
        tableRow.appendChild(tdTwo);

        table.appendChild(tableRow);
    }
}

Test();