populate js table with json data

Question

can you please please help me with something? i'm trying to create a table based on the information i receive from an endpoint. i've managed to create the structure of the table.

<div class="available-movies-component">
      <div class="color-code-wrapper">
        <span class="title">Key</span>
      </div>

      <div class="table-wrapper">

      </div>
    </div>

const API = 'https://raw.githubusercontent.com/alex-cenusa/movies/master/movies.json';
async function getData() {
  try {
    let response = await fetch(API);
    if (response.status == 200) {
      let data = await response.json();
      return data;
    } else {
      throw new Error(response.status);
    }
  } catch (error) {
    console.log(error);
  }
}

getData().then((data) => {
  const KEY = data.data.key.forEach((key) => {
    const LEGEND_WRAPPER = document.querySelector('.color-code-wrapper');
    const UNIT_TYPE = key.type;
    const KEY_BTN = document.createElement('button');
    KEY_BTN.innerText = UNIT_TYPE;
    const KEY_BTN_COLOR = key.color;
    KEY_BTN.style.backgroundColor = KEY_BTN_COLOR;
    LEGEND_WRAPPER.appendChild(KEY_BTN);
  });

  const TABLE_WRAPPER = document.querySelector('.table-wrapper');

  let col = [];
  for (let i = 0; i < data.data.movies.length; i++) {
    for (let key in data.data.movies[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  const table = document.createElement('table');
  let tr = table.insertRow(-1); // table row.

  for (let i = 0; i < col.length; i++) {
    let th = document.createElement('th'); // table header.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }
  for (let i = 0; i < data.data.movies.length; i++) {
    tr = table.insertRow(-1);

    for (let j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      tabCell.innerHTML = data.data.movies[i][col[j]];
    }
  }

  TABLE_WRAPPER.appendChild(table);
});

and here is my jsfiddle https://jsfiddle.net/nopqxdvz/

what i need to do now, and i need some help with is to create a button inside every row corresponding to Type/Use column, with the name inside the object and for the background-color of the button to have the hex code inside the object. and for the Rental, to have a link with the href of the url provided if the url exists. right now i'm getting [object Object]

thanks in advance for every help i can get!

Answer 1

https://jsfiddle.net/cjr6sfpb/2/ here solution

Code i changed added button styling :

// added this mergeObjectValues function to handle.
let button_style= {
    "Comedy" : "blue-button",
    "Thriller":"pink-button",
    "Alternative":"green-button",
    "Documentary":"red-button"
  }

  function mergeObjectValues(key,obj,tablecell){
   let merge_string = [];
   let button;
   for (let i = 0; i < obj.length; i++) {
     if(merge_string.indexOf(obj[i][key]) == -1)
      { 
        merge_string.push(obj[i][key]); 
        if (key == 'type'){
          button = document.createElement('button'); 
          button.classList.add(button_style[obj[i][key]]);
          button.innerHTML = obj[i][key];
          tablecell.append(button);
        }
        else{
        merge_string.push(obj[i][key]); 
        tablecell.innerHTML = obj[i][key];
        }
      }
   }
   return tablecell;
  }

  const table = document.createElement('table');
  let tr = table.insertRow(-1); // table row.

  for (let i = 0; i < col.length; i++) {
    let th = document.createElement('th'); // table header.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }
  let col_key ={
    "Type/Use" : "type",
    "Rental" : "name"
  }
  for (let i = 0; i < data.data.movies.length; i++) {
    tr = table.insertRow(-1);

    for (let j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var tablecontent = data.data.movies[i][col[j]];

      console.log(col);
      console.log(tablecontent instanceof Array);
      if( tablecontent instanceof Array){
       tabCell = mergeObjectValues(col_key[col[j]],tablecontent,tabCell);
      }else{
      tabCell.innerHTML = tablecontent;
      }

    }
  }