how to loop the ajax response?

Question

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.

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

<script>
  $(function() {
    
    $('#subcategory-selector').on('click', function() {
      let $subCategory = $('#subCategory')
      let $category = $("#category").val()

      $.ajax({
        type: 'GET',
        url: '/getSubCategory/' + $category,
        success: function(data) {
          let result = [];
          for( let i = 0; i< data.subCategory.length; i++) {
            let obj = {
              id: data.subCategory[i]._id,
              subCategory: data.subCategory[i].subCategory,
            }
            result.push(obj)
          }
          
          $subCategory.append('<option>' + result[0].subCategory +'</option>')
          $subCategory.append('<option>' + result[1].subCategory +'</option>')
        },
        error: function() {
          alert("No sub Category found")
        }
      })
    })
  })
</script>

Here is the html. ** In this place i want my sub category inside the option element. **

               <div class="form-group">
                  <label class="form-control-label text-primary" for="example3cols2Input">Sub Category</label>
                  <select name="subCategory" id="subcategory-selector" class="form-control">
                    <option value="sub" id="subCategory"></option>
                  </select>
                </div>

The JSON i am getting as Response is:

{
  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
}

Help me to render the output in option tag.

Probably because you push result[0] and result[1], not result[i] and result[i+1], something like that. Try for( let result of data.subCategory) { $subCategory.append('<option>' + result.subCategory +'</option>') } — Jeremy Thille
– Jeremy Thille, Commented May 12, 2021 at 12:22
Nice, so I have posted my comment as an answer, if it worked for you, please consider marking it as accepted. — Jeremy Thille
– Jeremy Thille, Commented May 13, 2021 at 5:11

Jeremy Thille · Accepted Answer · 2021-05-13 05:10:32Z

1

Try this :

for( let result of data.subCategory) {
   $subCategory.append('<option>' + result.subCategory +'</option>')
}

answered May 13, 2021 at 5:10

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to loop the ajax response?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related