Как установить значение свойства в другом объекте, используя для l oop? - PullRequest
Новая
       10

Как установить значение свойства в другом объекте, используя для l oop?

0 голосов
/ 26 марта 2020

У меня большая проблема (для меня это большая проблема) с установкой значения свойства объекта. У меня есть такой объект: 

const newPlan = {
    name: '',
    description: '',
    number: '',
    monday: {
        breakfast: '',
        secondBreakfast: '',
        soup: '',
        secondMeal: '',
        supper: '',
    }
};

Значение клавиш зависит от ввода пользователя. Легко установить первые 3 значения, но у меня есть проблема с объектом в значениях объекта, и я должен использовать для этого l oop.

Существует 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
    }
}

'ab c' - просто для примера - я хочу установить значение на основе значения входного списка, которое основано на том, что выбирают пользователи. Так что есть <input list="monday-breakfast"> et c. и каждое значение из этих входных данных должно иметь правильное значение ключа. Наконец, это должно понравиться, например: 

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

1 Ответ

0 голосов
/ 26 марта 2020

Вам необходимо l oop поверх записей 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>
...