const tbody = document.querySelector('.product').tBodies[0],
szKeys = ['name', 'available', 'price'],
data = getData();
Object.values(data).forEach(({ name, color: { name: color }, sizes }) => { // получение значений объекта, и цикл по ним - с деструктуризацией каждого значения (объекта товара) из первого аргумента коллбэка
const szData = szKeys.reduce((rslt, k) => ((rslt[k] = []), rslt), {}); // инициализация нового объекта под данные о размерах (пустыми массивами)
Object.values(sizes).forEach(size => {
szKeys.forEach(key => szData[key].push(size[key])); // значения свойств каждого размера заносим в объект с данными о размерах
});
const [ sizeNames, qtys, prices ] = Object.values(szData).map(arr => arr.join('/')), // объединение (в строку) каждого массива данных о размерах, и затем присваивание полученных строк переменным
row = tbody.insertRow(); // добавление новой строки таблицы
[name, color, sizeNames, qtys, prices].forEach(v => row.insertCell().textContent = v); // добавление в строку таблицы новых ячеек, и их заполнение значениями из массива
});
function getData() {
return {
"2001": {
"name": "Товар 1",
"color": {
"name": "Красный",
"value": "#FF004D"
},
"sizes": {
"3001": {
"name": "S",
"available": 26,
"price": 900
},
"3002": {
"name": "M",
"available": 24,
"price": 940
},
"3003": {
"name": "L",
"available": 12,
"price": 300
},
"3004": {
"name": "XL",
"available": 32,
"price": 800
}
}
},
"2002": {
"name": "Товар 2",
"color": {
"name": "Зеленый",
"value": "#008365"
},
"sizes": {
"4001": {
"name": "M",
"available": 9998,
"price": 200
},
"4002": {
"name": "L",
"available": 45,
"price": 230
},
"4003": {
"name": "XXL",
"available": 1,
"price": 1300
}
}
},
"2003": {
"name": "Товар 3",
"color": {
"name": "Синий",
"value": "#3B5998"
},
"sizes": {
"5001": {
"name": "S",
"available": 0,
"price": 0
},
"5002": {
"name": "M",
"available": 0,
"price": 0
},
"5003": {
"name": "L",
"available": 23,
"price": 130
}
}
},
"2004": {
"name": "Товар 4",
"color": {
"name": "Марсала",
"value": "#4C1A2C"
},
"sizes": {
"6001": {
"name": "L",
"available": 0,
"price": 0
},
"6002": {
"name": "XL",
"available": 0,
"price": 0
},
"6003": {
"name": "XXL",
"available": 0,
"price": 0
}
}
}
};
}table { border-collapse: collapse; }
th, td { padding: 0.2em 0.4em; border: 1px solid #ccc; }<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<table class="product">
<tr>
<th>Название товара</th>
<th>Цвет</th>
<th>Размер</th>
<th>Доступное кол-во</th>
<th>Цена</th>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>Distribution of columns and lines (in cycle Object.values(sizes)() - Maybe whatever, for example, I just combined the values in the text contents of the cells.I advise you to turn the codebook around the page to see better the comments in the lines.MDN: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ;Tables: https://developer.mozilla.org/ru/docs/Web/API/HTMLTableElement/insertRow (for addition of lines, tr); and https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell (for adding cells, th|td);Statistical method https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/values returning (massive) the values of all the object ' s own properties.