title: How to insert JSON Data into form fields
body: <p>I have a form consist of <code>dropdown</code> and <code>input fields</code> some fields are read only.
  What I am trying to do is to store the JSON data inside the form fields</p>
  
  <p>here I have </p>
  
  <ul>
  <li>Distributor name (dropdown)</li>
  <li>Name of the user (dropdown)</li>
  <li>user Code (input field)</li>
  <li>Login Id (input field)</li>
  <li>password (input field)</li>
  </ul>
  
  <p>I Have JSON as</p>
  
  <pre><code>    [
    {
      "Distributor": "maiyas",
      "Name": "admin",
      "User Code": "AAA01",
      "Login Id": "admin123",
      "password": "admin123"
    }
  ]
  </code></pre>
  
  <p><strong>snippet</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function show(a) {
    var x = document.getElementById(a);
    var c = x.nextElementSibling
    if (x.getAttribute('type') == "password") {
      c.removeAttribute("class");
      c.setAttribute("class", "fas fa-eye");
      x.removeAttribute("type");
      x.setAttribute("type", "text");
    } else {
      x.removeAttribute("type");
      x.setAttribute('type', 'password');
      c.removeAttribute("class");
      c.setAttribute("class", "fas fa-eye-slash");
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="testingForm"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;h5 id="commonHeader"&gt;Distributor Name&lt;/h5&gt;
          &lt;select id="myselect"&gt;&lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;h5 id="commonHeader"&gt;Name Of the user&lt;/h5&gt;
          &lt;select id="myselect"&gt;&lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;h5 id="commonHeader"&gt;User Code&lt;/h5&gt;
          &lt;input type="text" id="userCode" name="usercode" class="commanClass" placeholder="user Code" readonly="readonly"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;h5 id="commonHeader"&gt;Login Id&lt;/h5&gt;
          &lt;input type="text" id="loginId" name="loginid" class="commanClass" placeholder="Login Id" readonly="readonly"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;h5 id="commonHeader"&gt;Current Password&lt;/h5&gt;
          &lt;input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password" readonly="readonly"&gt; &lt;i onclick="show('currentPass')" class="fas fa-eye-slash" id="display"&gt;&lt;/i&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
        &lt;hr&gt;
        &lt;br&gt;
        &lt;button type="submit" id="save" class="commonButton"&gt;Save&lt;/button&gt;
        &lt;button type="button" id="save" class="commonButton"&gt;Clear&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am getting JSON object inside a array and want to display the JSON data into fields.</p>