Необходимо заполнить данные формы из данных JSON. Не появляется

Question

Вещи не важны, так как я также пытаюсь это сделать с помощью jsfiddle, поэтому исключаю, что это не React.JS, что приводит к незаполнению формы.
У меня есть данные из файла. Он должен быть в формате json, и цель состоит в том, чтобы увлажнить (заполнить) поля формы. Вот лишь небольшая часть этого: https://jsfiddle.net/vp5kLxgs/

Хотя было бы неплохо использовать некоторую функцию карты или, возможно, идентификатор формы,Я согласен на все, что будет просто зацикливаться на форме. Я могу изменить форму, если это необходимо. Я планирую иметь идентификатор и имя

. работает ... но зацикливание данных не заполняет поля формы.

С console.log я могу видеть ключ и значение, но я не знаю, как предполагается, что formdata знать, чтобы использовать мойФорма id = "ImportantForm", это нужно?

Answer 1

FormData() не предназначен для связывания данных между структурой данных и формой. Для этого и были созданы фреймворки / библиотеки UI (React, Vue, Angular и т. Д.). FormData предназначен для предоставления способа создания структур данных, которые могут быть легко отправлены на сервер :

Он предназначен в первую очередь для использования при отправке данных формы, но можетиспользоваться независимо от форм для передачи ключевых данных. Переданные данные находятся в том же формате, который использовался бы методом submit () формы для отправки данных, если бы тип кодировки формы был установлен в multipart / form-data

Однако установка значений поля формывручную довольно просто:

var json = {family1Name: "jack", family1Relationship: "brother", family1Phone: "00045555000"};

var form = $("#importantForm");

for (var key in json) {
    var selector = `input[name="${ key }"], textarea[name="${ key }"]`
    var input = $(form).find(selector)  
    input.val(json[key]);
  }

Answer 2

Образец JSON

const data = {
    family1Name: "Jack",
    family1Relationship: "None",
    family1Phone: "999"
  };

И поместите следующий jsx внутри тега <form></form>, довольно просто

{Object.keys(data).map(k => (
      <div className="form-group">
        <label htmlFor={k}>{k}</label>
        <input
          type="text"
          className="form-control"
          name={k}
          id={k}
          value={data[k]}
        />
      </div>
    ))}

Это вывод