title: How to display a json array in table format?
body: <p>I have a json array with this format:</p>
  
  <pre><code>[
      {
          id : "001",
          name : "apple",
          category : "fruit",
          color : "red"
      },
      {
          id : "002",
          name : "melon",
          category : "fruit",
          color : "green"
      },
      {
          id : "003",
          name : "banana",
          category : "fruit",
          color : "yellow"
      }
  ]
  </code></pre>
  
  <p>Now, I want to parse and display it in table format in Javascript or jQuery. The table has four columns, and each column indicates each attribute of each element in this array. The first row of this table is the name of these four keys. And the other rows are the values of these keys.</p>
  
  <p>I don't know how to write a JavaScript code to achieve this function. Could you help me with this?</p>