如何使用for循环在另一个对象中设置属性值？

Question

我在设置对象属性值时遇到了一个大问题（对我来说它很大）。 我有一个这样的对象：

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',
    }
};

Answer 1

您需要使用index newPlan.monday的条目，以便您可以将当前key的值设置为适当元素的值。 在这种情况下，它是monday-index (monday-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>