title: how to loop the ajax response?
body: <p>I am trying to learn AJAX way of coding and just started using jquery. I want to fetch the subcategory from mongodb database to the option tag as soon as the (parent )ie, select tag is clicked.</p>
  <p>Here i tried and got data but every data are in same option tag and i want them to be in different option tag.
  Here is the jQuery code</p>
  <pre><code>&lt;script&gt;
    $(function() {
      
      $('#subcategory-selector').on('click', function() {
        let $subCategory = $('#subCategory')
        let $category = $(&quot;#category&quot;).val()
  
        $.ajax({
          type: 'GET',
          url: '/getSubCategory/' + $category,
          success: function(data) {
            let result = [];
            for( let i = 0; i&lt; data.subCategory.length; i++) {
              let obj = {
                id: data.subCategory[i]._id,
                subCategory: data.subCategory[i].subCategory,
              }
              result.push(obj)
            }
            
            $subCategory.append('&lt;option&gt;' + result[0].subCategory +'&lt;/option&gt;')
            $subCategory.append('&lt;option&gt;' + result[1].subCategory +'&lt;/option&gt;')
          },
          error: function() {
            alert(&quot;No sub Category found&quot;)
          }
        })
      })
    })
  &lt;/script&gt;
  
  </code></pre>
  <p>Here is the html. ** In this place i want my sub category inside the option element. **</p>
  <pre><code>               &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label class=&quot;form-control-label text-primary&quot; for=&quot;example3cols2Input&quot;&gt;Sub Category&lt;/label&gt;
                    &lt;select name=&quot;subCategory&quot; id=&quot;subcategory-selector&quot; class=&quot;form-control&quot;&gt;
                      &lt;option value=&quot;sub&quot; id=&quot;subCategory&quot;&gt;&lt;/option&gt;
                    &lt;/select&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>The JSON i am getting as Response is:</p>
  <pre><code>{
    subCategory: [
      {
        category: [Array],
        _id: 609bb80061350f23301ba6b3,
        subCategory: 'hy',
        createdAt: 2021-05-12T11:12:00.035Z,
        updatedAt: 2021-05-12T11:12:00.035Z,
        __v: 0
      },
      {
        category: [Array],
        _id: 609bb80561350f23301ba6b4,
        subCategory: 'by',
        createdAt: 2021-05-12T11:12:05.886Z,
        updatedAt: 2021-05-12T11:12:05.886Z,
        __v: 0
      }
    ],
    _id: 609bb7e961350f23301ba6b2,
    category: 'Hello',
    image: 'images\\2021-05-12T11-11-37.489Z-images.jpg',
    createdAt: 2021-05-12T11:11:37.580Z,
    updatedAt: 2021-05-12T11:12:05.911Z,
    __v: 0
  }
  
  </code></pre>
  <p>Help me to render the output in option tag.</p>