Data Filter is not working in ajax

Question

I have to get data from json file but "data:{filtertype: filtertype}" is not working. When i click on any category that show this error:

"Uncaught TypeError: Cannot read property 'length' of undefined"

. My code is below please help. Thanks in advance.

JQUERY

$(document).ready(function(e) {
    $( ".current" ).click(function() {
        $(".portfolio-style").hide();
        $(".homeportfolioloader").show();
        var filtertype = $(this).data("filter");
        $.ajax({
           url:'portfolio-images.html',
           type:'POST',
           dataType:"json",
           data:{filtertype: filtertype},
       }).done(function(data) {
            if(data) {
                var li  = "";
                $.each(data.filtertype, function( index, value ) {
                    console.log("Index: " + index.pimg_id);
                    console.log("Value: " + value.pimg_id);
                    li +="<li class='"+value.pcat_slug+"'><img src='images/portfolio/logo/"+value.pcat_slug+"/"+value.pimg_name+"'/></li>";
                });
                $(".portfolio-style").empty();
                $(".portfolio-style").append(li);
                setTimeout(function(){
                    $(".homeportfolioloader").hide();
                    $('.portfolio-style').fadeIn(800);
                }, 4000); 
            }
       });
   });  
});

HTML

<h1>Get Data Using Json</h1>
<div class="portfolio-menu">
    <ul>
        <li><a class="current" data-filter="all" style="cursor: pointer !important;">All</a></li>
        <li><a class="current" data-filter="mobileapps" style="cursor: pointer !important;">Mobile Apps</a></li>
        <li><a class="current" data-filter="illustrations" style="cursor: pointer !important;">Illustrations</a></li>
    </ul>
</div>
<div class="homeportfolioloader" style="display: none;"></div>
<ul class="portfolio-style"></ul>

Answer 1

Try this way :

portfolio-images.json

[
    {
        "pimg_id":"860",
        "pimg_name":"logo-1.jpg",
        "pimg_catid":"66",
        "pcat_slug":"mobile-apps",
        "pcat_name":"Mobile Apps"
    },
    {
        "pimg_id":"702",
        "pimg_name":"logo-2.jpg",
        "pimg_catid":"52",
        "pcat_slug":"illustrations",
        "pcat_name":"Illustrations"
    },
    {
        "pimg_id":"153",
        "pimg_name":"logo-3.jpg",
        "pimg_catid":"15",
        "pcat_slug":"animals",
        "pcat_name":"Animals"
    },
    {
        "pimg_id":"926",
        "pimg_name":"logo-4.jpg",
        "pimg_catid":"71",
        "pcat_slug":"real-estate",
        "pcat_name":"Real Estate"
    },
    {
        "pimg_id":"515",
        "pimg_name":"logo-5.jpg",
        "pimg_catid":"41",
        "pcat_slug":"event-managment",
        "pcat_name":"Event Managment"
    },
    {
        "pimg_id":"1060",
        "pimg_name":"logo-6.jpg",
        "pimg_catid":"78",
        "pcat_slug":"technology",
        "pcat_name":"Technology"
    },
    {
        "pimg_id":"1043",
        "pimg_name":"logo-7.jpg",
        "pimg_catid":"78",
        "pcat_slug":"technology",
        "pcat_name":"Technology"
    },
    {
        "pimg_id":"987",
        "pimg_name":"logo-8.jpg",
        "pimg_catid":"74",
        "pcat_slug":"restaurants",
        "pcat_name":"Restaurants"
    },
    {
        "pimg_id":"1053",
        "pimg_name":"logo-9.jpg",
        "pimg_catid":"78",
        "pcat_slug":"technology",
        "pcat_name":"Technology"
    }
]

jquery:

$(document).ready(function(e) {
    $(".portfolio-style").hide();
    $(".homeportfolioloader").show();
    $.ajax({
        url: 'data.json',
        type: 'GET',
        dataType: "json",
    }).done(function(data) {
        if (data) {
            var li = "";
            $.each(data, function(index, value) {
                li += "<li class='" + value.pcat_slug + "'><img src='images/portfolio/logo/" + value.pcat_slug + "/" + value.pimg_name + "'/></li>";
            });
            $(".portfolio-style").empty();
            $(".portfolio-style").append(li);

            setTimeout(function() {
                $(".homeportfolioloader").hide();
                $('.portfolio-style').fadeIn(800);
            }, 1000);
        }
    });

    $(".current").click(function() {
        $(".portfolio-style").hide();
        $(".homeportfolioloader").show();
        $('.portfolioFilter  a.current22').removeClass('current');
        $('.portfolioFilter  a.current22').removeClass('current22');
        $('.portfolioFilter  a i.pf-icon1-active').removeClass('pf-icon1-active');

        $(this).addClass('current22');
        $(this).children("i").addClass('pf-icon1-active');
        var filtertype = $(this).data("filter");
        console.log(filtertype);
        $.ajax({
            url: 'data.json',
            type: 'GET',
            dataType: "json",
            success: function(data) {
                if (data) {
                    console.log(data);
                    var li = "";
                    console.log("Filter Type: " + filtertype);
                    $.each(data, function(index, value) {
                        if (filtertype === "all") {
                            li += "<li class='" + value.pcat_slug + "'><img src='images/portfolio/logo/" + value.pcat_slug + "/" + value.pimg_name + "'/></li>";
                        }
                        console.log(filtertype);
                        if (value.pcat_slug === filtertype) {
                            li += "<li class='" + value.pcat_slug + "'><img src='images/portfolio/logo/" + value.pcat_slug + "/" + value.pimg_name + "'/></li>";
                        }
                    });
                    $(".portfolio-style").empty();
                    $(".portfolio-style").append(li);
                    setTimeout(function() {
                        $(".homeportfolioloader").hide();
                        $('.portfolio-style').fadeIn(800);
                    }, 1000);
                }
            }
        });
    });
});

Html

<h1>Get Data Using Json</h1>
<div class="portfolio-menu">
    <ul>
        <li><a class="current" data-filter="all" style="cursor: pointer !important;">All</a></li>
        <li><a class="current" data-filter="mobile-apps" style="cursor: pointer !important;">Mobile Apps</a></li>
        <li><a class="current" data-filter="illustrations" style="cursor: pointer !important;">Illustrations</a></li>
        <li><a class="current" data-filter="animals" style="cursor: pointer !important;">Animals</a></li>
        <li><a class="current" data-filter="real-estate" style="cursor: pointer !important;">Real Estate</a></li>
        <li><a class="current" data-filter="event-managment" style="cursor: pointer !important;">Event Management</a></li>
        <li><a class="current" data-filter="restaurants" style="cursor: pointer !important;">Restaurants</a></li>
        <li><a class="current" data-filter="technology" style="cursor: pointer !important;">Technology</a></li>
    </ul>
</div>
<div class="homeportfolioloader" style="display: none;"></div>
<ul class="portfolio-style"></ul>

Answer 2

Please see below code.

$( ".current" ).click(function() {
$(".portfolio-style").hide();
$(".homeportfolioloader").show();

        var filtertype = $(this).data("filter");
        $.ajax({
        url:'portfolio-images.html',
        type:'POST',
        dataType:"json",
        data:JSON.stringify({filtertype: filtertype}),
        success:function(data){
         console.log(data);
        if(data){
            var li  = "";
            console.log(filtertype);
            $.each(data, function( index, value ) {
                li +="<li class='"+value.pcat_slug+"'><img src='images/portfolio/logo/"+value.pcat_slug+"/"+value.pimg_name+"'/></li>";
            });
            $(".portfolio-style").empty();
            $(".portfolio-style").append(li);
            setTimeout(function(){
                $(".homeportfolioloader").hide();
                $('.portfolio-style').fadeIn(800);
            }, 4000); 
        }
        }
    });
});

Answer 3

Please check the response content type i think you are calling the HTML page and so it will be something else it content type must be application/json