$.grep not working with me for filtering JSON-CodePudding

Trying to use grep so that I do not do multiple calls to my server for the controls it creates -

$.ajax({
    type: "POST",
    url: "../WebMethods/MarketPersuitMethods.aspx/GetQueryInfo",
    data: '{Status: "'   Name   '", search: "'   SearchBox.text()   '" }',
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    async: false,
    success: function (d) {
        var preparse = JSON.stringify($.parseJSON(d.d));
                    
        var data = $.grep(preparse, function (element, index) {
            return element.status.trim() == "Pending";
        });
        $("[id*=TextBox2]").text(preparse);
    }
});

This is returning JSON formatted data if I test the preparse variable.

I can't post the JSON because it's so much and would need to be anonymoized. However as a sample it returns something like the following:

[{
    "Project ID": "18180",
    "OPRN": null,
    "Proj_Type": "2049",
    "CompleteDate": "2020-05-21T00:00:00",
    "SQFT": 2000,
    "State": "FL      ",
    "County": "Orange",
    "status": "Pending"
},
{
    "Project ID": "18180",
    "OPRN": null,
    "Proj_Type": "2049",
    "CompleteDate": "2020-05-21T00:00:00",
    "SQFT": 2000,
    "State": "SC",
    "County": "Orange",
    "status": "Pending"
},
{
    "Project ID": "18180",
    "OPRN": null,
    "Proj_Type": "2049",
    "CompleteDate": "2020-05-21T00:00:00",
    "SQFT": 2000,
    "State": "GA",
    "County": "Orange",
     "status": "Won"
}];

However, when trying to to $.grep I get the following with the data variable:

[{
    {
        "P,r,o,j,e,c,t, ,I,D,",:, ",1,8,1,8,0,",
        ",O,P,R,N,",:, ,n,u,l,l,
        "P,r,o,j,_,T,y,p,e,",:, ,",2,0,4,9,",
        "C,o,m,p,l,e,t,e,D,a,t,e,",:, ,",2,0,2,0,-,0,5,-,2,1,T,0,0,:,0,0,:,0,0,",
        ",S,Q,F,T,",:, ,2,0,0,0,,
        "S,t,a,t,e,",:, ,",G,A,",
        "C,o,u,n,t,y,",:, ,",O,r,a,n,g,e,",
         "s,t,a,t,u,s,": ",W,o,n,,
    }];

CodePudding user response：

As pointed out in the comments you don't need to do any preparsing or any preparation of your response at all. The sample you've provided is JSON, and your AJAX code tells JS to expect a JSON response (dataType: 'json'), so in your success callback d is already JSON. Simply get rid of your preparsing stuff, and your code works:

let d = [
    {
        "Project ID": "18180",
        "OPRN": null,
        "Proj_Type": "2049",
        "CompleteDate": "2020-05-21T00:00:00",
        "SQFT": 2000,
        "State": "FL      ",
        "County": "Orange",
        "status": "Pending"
    },
    {
        "Project ID": "18180",
        "OPRN": null,
        "Proj_Type": "2049",
        "CompleteDate": "2020-05-21T00:00:00",
        "SQFT": 2000,
        "State": "SC",
        "County": "Orange",
        "status": "Pending"
    },
    {
        "Project ID": "18180",
        "OPRN": null,
        "Proj_Type": "2049",
        "CompleteDate": "2020-05-21T00:00:00",
        "SQFT": 2000,
        "State": "GA",
        "County": "Orange",
        "status": "Won"
    }
];

var data = $.grep(d, function (element, index) {
    return element.status.trim() == "Pending";
});

console.dir(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>