title: Displaying JSON object key value in HTML textfield
body: <p>So lets say right now, I received a JSON object:</p>
  <pre><code>var myDetails = {
      RecipientName: &quot;Jake&quot;,
      Address: &quot;51 Lake District&quot;,
      CountryName: &quot;United States&quot;
  }
  </code></pre>
  <p>and I want to display each key value on the textfields of my HTML page as below:</p>
  <p><a href="https://i.stack.imgur.com/rHNoD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rHNoD.png" alt="enter image description here" /></a></p>
  <p>I managed to get it done by:</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>var myDetails = {
      RecipientName: "Jake",
      Address: "51 Lake District",
      CountryName: "United States"
  }
  
  var output_display = [
      ["name", "RecipientName"],
      ["address", "Address"],
      ["country", "CountryName"]
  ];
  
  for (i=0;i&lt;output_display.length;i++) {
      document.getElementById(output_display[i][0]).value = myDetails[output_display[i][1]]
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;label&gt;Name&lt;/label&gt;
    &lt;input type = "text" id = "name" disabled&gt;
    &lt;label&gt;Address of Residence&lt;/label&gt;
    &lt;input type = "text" id = "address" disabled&gt;
    &lt;label&gt;Country of Origin&lt;/label&gt;
    &lt;input type = "text" id = "country" disabled&gt;
    &lt;script src = "test.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, one thing I'm having second thoughts about is having to <strong>introduce the variable &quot;output_display&quot;</strong> in Javascript which is <strong>somewhat hardcoding the HTML textfield id</strong> with the <strong>JSON Object key value</strong>. Is there a more elegant and efficient way of doing this?</p>
  <p><strong>Edit</strong></p>
  <p>I could make the id of the textfields same as the key of the JSON but isn't it a bad practice to include uppercase in id naming?</p>