javascript - 如何使用 for 循环在另一个对象中设置属性值?
问题描述
我在设置对象属性值时遇到了一个大问题(对我来说这很大)。我有一个这样的对象:
const newPlan = {
name: '',
description: '',
number: '',
monday: {
breakfast: '',
secondBreakfast: '',
soup: '',
secondMeal: '',
supper: '',
}
};
键的值取决于用户输入。设置前 3 个值很容易,但对象值中的对象有问题,我必须使用这个循环。
有类似的HTML:
<tr>
<td>PONIEDZIAŁEK</td>
<td>
<input list="monday-breakfast" id="monday-1">
<datalist id="monday-breakfast">
</datalist>
</td>
<td>
<input list="monday-second-breakfast" id="monday-2">
<datalist id="monday-second-breakfast">
</datalist>
</td>
<td>
<input list="monday-soup" id="monday-3">
<datalist id="monday-soup">
</datalist>
</td>
<td>
<input list="monday-second-meal" id="monday-4">
<datalist id="monday-second-meal">
</datalist>
</td>
<td><input list="monday-supper" id="monday-5">
<datalist id="monday-supper">
</datalist></td>
</tr>
和我的js:
newPlan.name = planName.value;
newPlan.description = planDescription.value;
newPlan.number = planWeekNumber.value;
for (let i = 0; i < Object.keys(newPlan.monday).length; i++) {
for (let j = 0; j < allDays.length; j++) {
Object.values(newPlan.monday)[i] = 'abc';
break
}
}
'abc' 值只是示例 - 我想根据用户选择的输入列表值设置值。所以有<input list="monday-breakfast">
等等,并且来自这个输入的每个值都应该是正确的键值。最后它应该是这样的,例如:
const newPlan = {
name: 'some string from input',
description: 'some string from input',
number: 'some string from input',
monday: {
breakfast: 'some string from input list',
secondBreakfast: 'some string from input list',
soup: 'some string from input list',
secondMeal: 'some string from input list',
supper: 'some string from input list',
}
};
解决方案
您需要遍历 的条目newPlan.monday
,index
因此您可以将当前的值设置为key
适当的元素值。在这种情况下,它是monday-index
(星期一 1)。
这是一个例子:
const newPlan = {
name: '',
description: '',
number: '',
monday: {
breakfast: '',
secondBreakfast: '',
soup: '',
secondMeal: '',
supper: '',
}
};
let index = 1;
newPlan.name = document.getElementById('planName').innerHTML;
newPlan.description = document.getElementById('planDescription').innerHTML;
newPlan.number = document.getElementById('planWeekNumber').innerHTML;
for (let [key, value] of Object.entries(newPlan.monday)) {
newPlan.monday[key] = document.getElementById(`monday-${index}`).value;
index++;
}
console.log(newPlan);
<tr>
<td>PONIEDZIAŁEK</td>
<div id="planName">Plan 1</div>
<div id="planDescription">Tasty food.</div>
<div id="planWeekNumber">1</div>
<td>
<input list="monday-breakfast" id="monday-1" value="Ham and eggs">
<datalist id="monday-breakfast"></datalist>
</td>
<td>
<input list="monday-second-breakfast" id="monday-2" value="Cereal">
<datalist id="monday-second-breakfast"></datalist>
</td>
<td>
<input list="monday-soup" id="monday-3" value="Meat soup">
<datalist id="monday-soup"></datalist>
</td>
<td>
<input list="monday-second-meal" id="monday-4" value="Hamburger">
<datalist id="monday-second-meal"></datalist>
</td>
<td>
<input list="monday-supper" id="monday-5" value="Toast">
<datalist id="monday-supper"></datalist>
</td>
</tr>
推荐阅读
- vim - vim 中的 ripgrep :term
- email - Dell Boomi - 如何将电子邮件从收件箱移动到收件箱子文件夹?
- r - 每个循环添加日期列
- windows - 从开始菜单外壳链接启动的电子应用程序会改变 process.execPath?
- maven - 如何通过删除核心 jar 来使用由 maven 依赖项覆盖的战争中的自定义 .jar 文件
- javascript - 使用 .mockImplementation 来实现 Jest 模拟模块
- swiftui - VStack 中的 SwiftUI 视图相互重叠
- python - 在数字正则表达式python之后获取最后一部分
- python - 在脚本中导入错误的模块
- javascript - 一个组件如何将一个 prop 传递给另一个组件?