title: jQuery: Display the name of key and value of Json Array
body: <p>I have a json array as shown below:</p>
  
  <pre><code>var data =[{"id":"1","name1":"avi", "age":"20"},{"id":"2","name1":"suresh","age":"30"}, {"id":"3","name1":"rajesh", "age":"40"}];
  </code></pre>
  
  <p>I can retrive the key value pairs or get the value by key. but here the key's name for the second place(name1) is not constant (could be anything). What I know is I should be able to get the name of key in 2nd position of each array and display its value. This is how I did: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data =[
  {"id":"1","name1":"avi", "age":"20"},
  {"id":"2","name1":"suresh","age":"30"},
  {"id":"3","name1":"rajesh", "age":"40"}
  ];
  
  var keys = [];
  $.each(data, function(key1, value){
    if(key1 == 0){
      $.each(value, function(k,v){
        keys.push(k);
      });
    }
    console.log(keys[1]+ "::"+value[keys[1]]);   
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I could get <strong>result</strong>: </p>
  
  <p><a href="https://i.stack.imgur.com/wVRqX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wVRqX.png" alt="enter image description here"></a></p>
  
  <p>But I think there is more better and clean way to do. If there is please let me know. </p>
  
  <p>For each object how can I get the respective key value pair by doing something like obj[2].key and obj[2].value ??</p>