Compare data with ajax response using jquery

Question

I have Script is as below

$(document).ready(function () {
    $('body').find('.tree').fadeOut(0);

   $('.tree-title').click(function () {
	   var id = $(this).attr('id');
	   $.ajax({
			contentType : "application/json; charset=utf-8",
			dataType : "json",
			url : "loadSubFolders",
			type : 'GET',
			data : {
				id : id
			},
			success : function(response) {
				$.each(response, function(index, value) {
						response.push('<li class="tree-title" id='+value.folderId+'>'+value.folderName+'</li>');
						alert("Appended Successfully");
				});
				$('.tree').append( response.join('') );
			},
			error : function(res, textStatus) {
				var msg = "Unable to load Subfolder";
				alert(msg);
			}
		});
        setStatus($(this));
    });
});

In this I want to compare data means id to some response element like

success : function(response) {
    		$.each(response, function(index, value) {
    	if(id==value.rootId){
    response.push('<li class="tree-title" id='+value.folderId+'>'+value.folderName+'</li>');
    	alert("Appended Successfully");
    	}
   else{
    response.push('<li class="tree-title" ></li>');
    alert("Append Failed");
    	}
   });
    $('.tree').append( response.join('') );
},

But it s not working

How could i achieve this? Can anybody suggest me?

in ajax response list is there and i have id which is ajax data so now after getting ajax response i want to check that data with response as list element — Jyoti Jadhav
– Jyoti Jadhav, Commented Aug 1, 2018 at 6:41

LegenJerry · Accepted Answer · 2018-08-01 07:29:36Z

1

You can supply properties to your success callback and access them from within the closure using this. Example this.id The custom properties you specify can't already be defined in the ajax prototype, otherwise you'll rewrite the default values. Try this:

$(document).ready(function () {
    $('body').find('.tree').fadeOut(0);

   $('.tree-title').click(function () {
       var id = $(this).attr('id');
       $.ajax({
            contentType : "application/json; charset=utf-8",
            dataType : "json",
            url : "loadSubFolders",
            type : 'GET',
            data : {
                id : id
            },
            id : id,
            success : function(response) {
                afterSuccess(response , this.id);

                function afterSuccess(data, i) {
                    $.each(data, function(index, value) {
                        if(i==value.rootId){
                            data.push('<li class="tree-title" id='+value.folderId+'>'+value.folderName+'</li>');
                            alert("Appended Successfully");
                        }
                        else{
                            alert("Append Failed");
                        }
                    });
                    $('.tree').append( data.join('') );
                }
            }
        });
        setStatus($(this));
    });
});

edited Aug 1, 2018 at 7:29

answered Aug 1, 2018 at 6:47

LegenJerry

4243 silver badges7 bronze badges

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

9 Comments

LegenJerry Over a year ago

what does console.log(this.id); output when placed inside your success callback? Is it defined? Is value.rootId defined?

Jyoti Jadhav Over a year ago

define alert(this.id) and works properly outside of each loop but didn't get value.rootId.

LegenJerry Over a year ago

Sorry you may have to append this.id to your response object since you are using $.each to iterate over it. Or optionally create a partial function supplying your custom parameter as an argument inside your success callback and call that function within your the $.each function

LegenJerry Over a year ago

Well then there is a problem with value.rootId. I would first check to see what your response is using console.log(response) then find out how to access its properties.

LegenJerry Over a year ago

If I'm not mistaken, response may be returning the outer container of JSON. You may have better luck with something like $.each(response[0], function(i,val){...}) Or something along those lines.

|

mukama · Accepted Answer · 2018-08-01 07:42:38Z

You could load your results into a separate variable like contents

$(document).ready(function () {
    $('body').find('.tree').fadeOut(0);

   $('.tree-title').click(function () {
       var id = $(this).attr('id');
       $.ajax({
            contentType : "application/json; charset=utf-8",
            dataType : "json",
            url : "loadSubFolders",
            type : 'GET',
            data : {
                id : id
            },
            id : id,
            success : function(response) {
                afterSuccess(response , this.id);
                function afterSuccess(data, i) {
                    var contents = "";
                    $.each(data, function(index, value) {
                        if(i==value.rootId){
                            contents += '<li class="tree-title" id='+value.folderId+'>'+value.folderName+'</li>';
                            alert("Appended Successfully");
                        }
                        else{
                            alert("Append Failed");
                        }
                    });
                    $('.tree').append( contents );
                }
            }
        });
        setStatus($(this));
    });
});

Collectives™ on Stack Overflow

Compare data with ajax response using jquery

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related