title: How to populate input fields using Json file?
body: <p>I am trying to populate html form fields automatically. Based on what user selects in first field, other input fields are filled automatically. I was able to get code for related functions (fetch json data, creating dropdown list from json data) through my friend. Here is the link to that code
  <code>enter code here</code>"<a href="https://jsfiddle.net/r4zuy7tn/1/" rel="nofollow noreferrer">https://jsfiddle.net/r4zuy7tn/1/</a>" . i have added code in question also.</p>
  
  <p>But unfortunately,  in his code,  he has used dynamic input fields. and I am not comfortable with using Dynamic fields. therefore I tried to edit some parts of the code (i got through my friend) so that i could make this code to automatically fill values in manually created input fields rather than creating dynamic input fields and than populating them. but failed in this as i don't  know about coding enough.</p>
  
  <p>can someone please help me to accomplish this task?
  i just need to add some different function in the code (javascript) which could populate manually created input fields rather than creating dynamic fields.
  any help will be appreciated...</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>// define the headings here, so we can access it globally
  // in the app
  let headings = []
  
  // appending the created HTML string to the DOM
  function initInputs(headingList) {
    jQuery(".fields").append(createInputsHTML(headingList))
  }
  
  // the HTMLT template that is going to be appended
  // to the DOM
  function createInputsHTML(headingList) {
    let html = ''
    headingList.forEach(heading =&gt; {
      if (heading !== 'Company') {
        html += `&lt;label for="${heading}"&gt;${heading}: &lt;/label&gt;`
        html += `&lt;input id="${heading}"&gt;`
        html += '&lt;br&gt;'
      }
    })
  
    return html
  }
  
  // receiving data
  // this data arrives later in the app's lifecycle,
  // so it's the best to return a Promise object
  // that gets resolved (check JS Promise for more information)
  function getJSON() {
    return new Promise(resolve =&gt; {
      jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
        resolve(JSON.parse(data))
      });
    })
  }
  
  // processing raw JSON data
  function processRawData(data) {
    return new Promise(resolve =&gt; {
      const companyData = []
      // creating data array
      // handling multiple sheets
      Object.values(data).forEach((sheet, index) =&gt; {
        sheet.forEach((company, i) =&gt; {
          companyData.push({ ...company
          })
          // create headings only once
          if (index === 0 &amp;&amp; i === 0) {
            Object.keys(company).forEach(item =&gt; {
              headings.push(item.trim())
            })
          }
        })
      })
      resolve(companyData)
    })
  }
  
  $(async function() {
  
    let lists = [];
  
    function initAutocomplete(list) {
      const thisKey = 'Company'
      $("#company").autocomplete('option', 'source', function(request, response) {
        response(
          list.filter(item =&gt; {
            if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
              item.label = item[thisKey]
              return item
            }
          })
        )
      })
    }
  
    $("#company").autocomplete({
      minLength: 3,
      source: lists,
      focus: function(event, ui) {
        // the "species" is constant - it shouldn't be modified
        $("#company").val(ui.item.Company);
        return false;
      },
      select: function(event, ui) {
        // handling n number of fields / columns
        headings.forEach(heading =&gt; {
          $('#' + heading).val(ui.item[heading])
        })
        return false;
      }
    });
  
    // starting data download, processing and usage
    getJSON()
      .then(json =&gt; {
        return processRawData(json)
      })
      .then(data =&gt; {
        // just so we see what data we are using
        console.log(data)
        // make the processed data accessible globally
        lists = data
        initAutocomplete(lists)
        initInputs(headings)
      })
  
  });
  
  // this is how you get values form the form
  document.getElementById('btnListValues').addEventListener('click', function(e) {
    formGetValues('frm1')
  })
  // this is how you reset the form
  document.getElementById('btnResetForm').addEventListener('click', function(e) {
    formSetValues('frm1', '')
  })
  
  function formSetValues(formId, val) {
    const formEl = document.getElementById(formId).elements
    for (let i = 0; i &lt; formEl.length; i++) {
      formEl[i].value = val
    }
  }
  
  function formGetValues(formId) {
    const formEl = document.getElementById(formId).elements
    for (let el of formEl) {
      console.log(el.value)
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /&gt;
  &lt;div class="ui-widget"&gt;
    &lt;form id="frm1"&gt;
      &lt;label for="company"&gt;Company: &lt;/label&gt;
      &lt;input id="company"&gt;&lt;br /&gt;
      &lt;div class="fields"&gt;&lt;/div&gt;
  
  &lt;!-- below given input fields are those ones which i wanted to prefill, rather than creating dynamic fields. but my friend added that kind of function in javascript which firstly creates dynamic input fields and then populate them automatically.....
  
   
   
  1) PE Ratio
      &lt;input type="number"  id="PE" /&gt;&lt;br&gt;
      2)Price/Book 
       &lt;input type="number"  id="PB" /&gt;&lt;br&gt; 
      3)ROCE
      &lt;input type="number" id="ROCE" /&gt;&lt;br&gt;
      4) Sales Growth
       &lt;input type="number" id="SG" /&gt; &lt;br&gt; 
      5) NPM 
    &lt;input type="number" id="NPM" /&gt;&lt;br&gt;
    6) ROA
      &lt;input type="number" id="ROA" /&gt;&lt;br&gt; 
      7) Dividend Yield &lt;input type="number" id="DY" /&gt;&lt;br&gt;
    8) Debt/Equity
     &lt;input type="number" id="DE" /&gt;&lt;br&gt; 
   9)Price/Sales 
    &lt;input type="number" id="PS" /&gt;&lt;br&gt; 
    10) Unpledge Promoter Stake
     &lt;input type="number" id="UPS" /&gt;&lt;br&gt; 
  11) Current Ratio
    &lt;input type="number" id="CR" /&gt;&lt;br&gt; 
     &lt;br /&gt; 
     --&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;input id="btnListValues" type="button" value="List values"&gt;
  &lt;input id="btnResetForm" type="button" value="Reset form"&gt;</code></pre>
  </div>
  </div>
  </p>