用 json 數據填充 js 表

Question

你能幫我做點什么嗎？ 我正在嘗試根據從端點收到的信息創建一個表。 我設法創建了表格的結構。

<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);
});

這是我的jsfiddle https://jsfiddle.net/nopqxdvz/

我現在需要做的，我需要一些幫助是在與類型/使用列對應的每一行內創建一個按鈕，名稱在 object 內，並且按鈕的背景顏色在里面有十六進制代碼object。 對於租賃，如果 url 存在，則與提供的 url 的 href 鏈接。 現在我得到 [object Object]

提前感謝我能得到的每一個幫助！

Answer 1

https://jsfiddle.net/cjr6sfpb/2/這里解決方案

我更改了添加按鈕樣式的代碼：

// 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;
      }

    }
  }