自动检查复选框以匹配 ajax 调用中的结果

Question

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?

Answer 1

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;
        }
    });
}

Answer 2

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);
        }
      } 
    },
  });
};

Answer 3

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