如何使用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

newPlan.monday您需要使用 an循环遍历 的条目index，以便可以将 current 的值设置key为适当的元素值。在本例中为monday-index(monday-1)。这是一个例子：const newPlan = {&nbsp; name: '',&nbsp; description: '',&nbsp; number: '',&nbsp; monday: {&nbsp; &nbsp; breakfast: '',&nbsp; &nbsp; secondBreakfast: '',&nbsp; &nbsp; soup: '',&nbsp; &nbsp; secondMeal: '',&nbsp; &nbsp; supper: '',&nbsp; }};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)) {&nbsp; newPlan.monday[key] = document.getElementById(`monday-${index}`).value;&nbsp; index++;}console.log(newPlan);<tr>&nbsp; <td>PONIEDZIAŁEK</td>&nbsp; <div id="planName">Plan 1</div>&nbsp; <div id="planDescription">Tasty food.</div>&nbsp; <div id="planWeekNumber">1</div>&nbsp; <td>&nbsp; &nbsp; <input list="monday-breakfast" id="monday-1" value="Ham and eggs">&nbsp; &nbsp; <datalist id="monday-breakfast"></datalist>&nbsp; </td>&nbsp; <td>&nbsp; &nbsp; <input list="monday-second-breakfast" id="monday-2" value="Cereal">&nbsp; &nbsp; <datalist id="monday-second-breakfast"></datalist>&nbsp; </td>&nbsp; <td>&nbsp; &nbsp; <input list="monday-soup" id="monday-3" value="Meat soup">&nbsp; &nbsp; <datalist id="monday-soup"></datalist>&nbsp; </td>&nbsp; <td>&nbsp; &nbsp; <input list="monday-second-meal" id="monday-4" value="Hamburger">&nbsp; &nbsp; <datalist id="monday-second-meal"></datalist>&nbsp; </td>&nbsp; <td>&nbsp; &nbsp; <input list="monday-supper" id="monday-5" value="Toast">&nbsp; &nbsp; <datalist id="monday-supper"></datalist>&nbsp; </td></tr>