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?

Answer 1

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

Answer 2

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