заполнить цикл сгенерированные поля формы со значениями из JSON с JavaScript - PullRequest
Новая
       1

заполнить цикл сгенерированные поля формы со значениями из JSON с JavaScript

0 голосов
/ 30 октября 2019

У меня есть веб-страница, использующая javascript и jquery.

Я пытаюсь динамически создавать контент с помощью цикла for.

Цикл состоит из массива объектов json. Каждый объект имеет недельную строку и целое число.

каждый цикл создает две кнопки и поле формы. Номер должен заполнить поле формы.

Когда цикл выполняется, кнопки и поля формы создаются, однако число заполняет только первое поле формы.

Он заполняется каждым номером.

, поэтому с учетом массива 

var testobject = [
      {
        week: '9/15/20',
        number: 6
      },
      {
        week: '10/13/20',
        number: 70
      },
      {
        week: '11/17,20',
        number: 34
      }
    ];

первое поле формы будет заполнено числом 6, затем заменено на 70, а затем заменено на 34.

Скорее каждое поле формы должно иметьчисло, соответствующее его итерации в цикле for.

первое поле формы должно иметь 6, второе поле формы должно иметь 70, третье поле формы должно иметь 34

, вот код в моем цикле:

for( i  = 0; i < testobject.length; i++){
        console.log(testobject);
        $("#forcastcontentrow").append("<div  class=\"col-xs-12\">\n" +
          `      <p class=\"text-left text-uppercase text-muted\">wk of ${testobject[i].week}</p>\n` +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          "      <button class=\"btn btn-default btn-block m-0 p-0\"><span class=\"text-uppercase text-primary\">cbi</span></button>\n" +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          "      <button class=\"btn btn-default btn-block m-0 p-0\"><span class=\"text-uppercase text-muted\">custom</span></button>\n" +
          "    </div>\n" +
          "    <div class=\"col-xs-4\">\n" +
          "      <form class=\"form-inline\">\n" +
          "        <input type=\"number\"\n" +
          "               class=\"form-control\"\n" +
          "               id=\"forcasteddeplietionsinput\">\n" +
          "      </form>\n" +
          "    </div>");
        document.getElementById('forcasteddeplietionsinput').value = testobject[i].number;

      }

document.getElementById('forcasteddeplietionsinput').value = testobject[i].number; выполняется внутри цикла for, поэтому я не уверен, почему это происходит. Что не так с моим подходом?

1 Ответ

0 голосов
/ 30 октября 2019

Вам необходимо изменить селектор для элемента ввода текста.

document.getElementById возвращает только первый найденный элемент в DOM с заданным идентификатором. Поскольку ваш цикл for дублирует этот идентификатор, эта строка будет изменять только первый элемент ввода текста: 

document.getElementById('forcasteddeplietionsinput').value = testobject[i].number;

Что вы можете сделать, это изменить эту строку: 

id=\"forcasteddeplietionsinput\">\n"

.. .to this: 

class=\"forcasteddeplietionsinput\">\n"

... и затем используйте getElementsByClassName , чтобы вернуть массив всех текстовых входов и индексировать в нем, например: 

document.getElementsByClassName('forcasteddeplietionsinput')[i].value = testobject[i].number;
...