javascript - 用 json 数据填充 js 表
问题描述
你能帮我做点什么吗?我正在尝试根据从端点收到的信息创建一个表。我设法创建了表格的结构。
<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/
我现在需要做的,我需要一些帮助是在对应于类型/使用列的每一行内创建一个按钮,名称在对象内,并且按钮的背景颜色在里面有十六进制代码目的。对于租赁,如果 url 存在,则与提供的 url 的 href 链接。现在我得到 [object Object]
提前感谢我能得到的每一个帮助!
解决方案
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;
}
}
}
推荐阅读
- android - 带有按钮的 Firebase ArrayList 更新 firebase 数据
- android - 将 firebase_messaging 插件添加到 Flutter 项目
- javascript - 一个 mTurk HIT 中有多个问题。创建下一个按钮
- python - 使用 Python 以简单的方式构造欧拉方法
- python - 如何将 Django 模型计算属性用于 Django 管理器模型?
- javascript - 如何在需要时显示弹出错误/成功消息?
- assembly - “div”命令在 Assembly 中不起作用
- javascript - 在 laravel 中使用 reactjs 显示图像
- r - ggplot 将分组的条形图分成单独的条形图(按 y 值降序排列)
- angularjs - 是否可以在 ng-if 中将一次与 Angualrjs 中的一种方式绑定混合在一起?