Javascript 如何使用JSON数据创建所需的UI

我有一个Json数据，我正试图从中创建所需的UI，但我的问题是，我在循环它时遇到了问题

Ui与静态代码我正试图动态实现的功能

开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
浮动：对；
}
/*隐藏默认HTML复选框*/
.开关输入{
显示：无；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入.成功：选中+.滑块{
背景颜色：蓝色；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

雇用

员工能力1

员工职业2


雇用B

员工1


雇佣C

员工1

您的嵌套循环不正确。它在与输入数据的

相同的密钥列表上循环。您需要在
数据[key]
上循环以获取数组元素

每次通过外部循环，您都需要创建一个新的
卡头
和
列表组
，这将包含员工姓名。然后，内部循环用数组中的项填充该列表组。最后，将这一切附加到
.card
DIV


var数据={
“雇佣A”：[“EmployA1.jpg”、“EmployA2.jpg”]，
“雇佣B”：[“EmployB1.jpg”]，
“雇佣C”：[“EmployC1.jpg”]
}
变量计数器=Object.keys（数据）
console.log（counters.length）；
for（var输入数据）{
var新卡=$(`


`);
var ul_innerhtml=“”；
console.log（键）
$（“.card header”，newCard）.text（键）；
数据[key].forEach（d=>
ul_innerhtml+='
'+d+'
'
)
$（“.list group”，newCard）.append（ul_innerhtml）；
$（“.card”）.append（newCard.html（））；
}
开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
浮动：对；
}
/*隐藏默认HTML复选框*/
.开关输入{
显示：无；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入.成功：选中+.滑块{
背景色：#8bc34a；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

去
Data
是一个对象，您必须检索属性的值，而不是将对象添加到HTML字符串中。您需要在
数据[counters[i]]上循环。
我不知道您要做什么。您说过您正在尝试使用JSON数据复制静态代码。但是JSON数据不包括任何类似于
雇佣A
或
雇佣1
的内容。它有
CounterA1.jpg
，看起来它应该是
标记的源，但代码中没有类似的标记。@Barmar抱歉，我的错误，我已经更新了我的帖子，请检查