CODEWITHSUNDEEP
javascriptjqueryajax
Geoff_S
Geoff_S

Reputation: 5107

auto check checkboxes for matching result in ajax call

I'm trying to make it so that when my ajax call is returned with an object/array, I can match up the results to checkboxes so that if there is a match I auto check the boxes

Here are my checkboxes

<input type="checkbox" name='Magazine' data-md-icheck  />
<input type="checkbox" name='Website' data-md-icheck  />
<input type="checkbox" name='Advertisement' data-md-icheck  />

Now my ajax call is successful

I get back:

0: {}
type: "Magazine"
1: {}
type: "Website"

so in my ajax success, what I would like to do is take any result in that object, whether just one or all 3, and if the type matches the 'name' of the checkbox I want to check that box.

Here is my function that makes the successful ajax call. I just can't figure out a way to loop the return that I get so that I can match up any result that comes through

function getDetails(ID) {
    console.log(ID);
    $.ajax({
        url: "/details",
        data: {ID:ID},
        _token: "{{ csrf_token() }}",
        type: "POST",
        success: function (data) {

        },
    });
};

So in this case, how would I modify my ajax success to check the magazine and website boxes?

Upvotes: 1

Views: 216

Answers (3)

Garry Xiao
Garry Xiao

Reputation: 242

Assume the result is pure text exactly the same as you provided (ES6+)

let a = 'result...'
            ['Magazine', 'Website', 'Advertisement'].filter(item => a.indexOf(item) != -1).forEach(item => {
                let inputs = document.getElementsByName(item)
                if (inputs.length > 0)
                    inputs[0].checked = true
            })

Upvotes: 0

Shivratna Kumar
Shivratna Kumar

Reputation: 1311

Here is a pure JS and simple solution to this:-

// Assuming you get the response as an array of objects, which has a key as type
success: function (data) {
    data.forEach(obj => {
        let ele = document.getElementsByName(obj.type)[0];
        if(ele) {
          ele.checked = true;
        }
    });
}

Upvotes: 1

CreMedian
CreMedian

Reputation: 803

This is how I would tackle it:

function getDetails(ID) {
  console.log(ID);
  $.ajax({
    url: "/details",
    data: {ID:ID},
    _token: "{{ csrf_token() }}",
    type: "POST",
    success: function (data) {
      for(var i=0;i<data.length;i++){
        var item = data[i].type;
        var checkbox = $('input[name="'+item+'"]);
        if (checkbox.length){
          checkbox.prop('checked', true);
        }
      } 
    },
  });
};

Upvotes: 0

Related Questions