0

I want to create an html Vertical table with only re-render td inside th only after once th has been rendered with the having dynamic key as th. Using Only JavaScript

enter image description here

And I have two array of object data such as like this:

let Products = [
    {
      "Title": "Shirt",
     "description": "Levies Shirt",
     "image": "someImage1.png",
    },
    {
    "Title": "Jeans",
    "description": "Calvin Clean",
     "image": "someImage2.png"
  }
];

let  Variants= [
  {
    "Collection": "Men-Shirt",
    "Sku": "s-ch2",
    "Size": "S"
  },
  {
    "Collection": "Men-Jeans",
    "Sku": "m-ch3",
    "Size": "M"
  },
];

I am completely unable to resolve that how to achieve it.

James Z
  • 12,209
  • 10
  • 24
  • 44
user18116628
  • 11
  • 2
  • Does this answer your question? [How to create HTML table based on JSON](https://stackoverflow.com/questions/42558090/how-to-create-html-table-based-on-json) – tevemadar Feb 13 '23 at 14:26

1 Answers1

0

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers

Using the link above as a template of the html structure of a vertical table:

for (product in Products){
  // create new <td>
  // add text from product["Title"]
  // append <td> to proper <tr> (tr:nth-child(1) then tr:nth-child(2) ...)
  // create new <td>
  // add text from product["description"]
  // etc ...
}
qYUUU
  • 33
  • 1
  • 5