title: How to Generate column heading and table values dynamically from JSON array in angularjs?
body: <p>In a page I have two radio buttons and the two radio buttons produce different results:</p>
  
  <p>First button is about Student Details. My json array looks like this :</p>
  
  <pre><code> [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
    {"Name":"B", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
    {"Name":"C", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
    {"Name":"D", "Class":"x", "Section":"abcd", "DOB": "XYZ"}]
  </code></pre>
  
  <p>My second button is academic details. My json array looks like this :</p>
  
  <pre><code>  [{"Name":"A", "Language":"x", "English":"90", "Maths": "90"},
     {"Name":"B", "Language":"x", "English":"80", "Maths": "80"},
     {"Name":"C", "Language":"x", "English":"70", "Maths": "70"},
     {"Name":"D", "Language":"x", "English":"60", "Maths": "60"}]
  </code></pre>
  
  <p>Previously I followed code similar like this </p>
  
  <pre><code>&lt;body&gt;
    &lt;div ng-app="" ng-init='names =  [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
        {"Name ":"B ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "},
        {"Name ":"C ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "},
        {"Name ":"D ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "}];'&gt;
  
      &lt;table border="2px"&gt;
        &lt;tr&gt;
          &lt;th&gt;
            Name
          &lt;/th&gt;
          &lt;th&gt;
            Class
          &lt;/th&gt;
          &lt;th&gt;
            Section
          &lt;/th&gt;
          &lt;th&gt;
            DOB
          &lt;/th&gt;
        &lt;/tr&gt;
  
        &lt;tr ng-repeat="x in names"&gt;
          &lt;td&gt;
            {{ x.Name}}
          &lt;/td&gt;
          &lt;td&gt;
            {{x.Class}}
          &lt;/td&gt;
          &lt;td&gt;
            {{x. Section}}
          &lt;/td&gt;
          &lt;td&gt;
            {{x. DOB}}
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But now the table columns and table values differs. With the output json, I have to build table dynamically since table column name cannot be defined.</p>
  
  <p>Could anyone help with this?</p>