CODEWITHSUNDEEP
jqueryarrays
user1885099
user1885099

Reputation: 150

Create Jquery array from ajax response

I am trying to add or remove classes to some divs. These divs should be assigned different classes depending on the value of their html. I'm not sure what I'm doing wrong but my code isn't working.

This is my code:

$.ajax({
    type: 'POST',
    url: 'loc/bcheck.php',
    success: function(data){
        tArrx = new Array(data);
    },
    complete: function(){
        $('.bHr').each(function(){
            curElm = $(this);
            var bTm = curElm.html();
            if ($.inArray(bTm, tArrx) !== -1){
                curElm.addClass('disabled');
                curElm.removeClass('available');
            }
            else{
                curElm.addClass('available');
                curElm.removeClass('disabled');
            }
        });
    }
});

<div class="bHr">1</div>
<div class="bHr">5</div>

All values of the divs' html are caught correctly. And the function runs without errors. But I allways get the same result, value is not present in array.

'data' is 1", "2", "3", "4 and using console.log it returns ["1", "2", "3", "4"]

Upvotes: 0

Views: 1095

Answers (5)

user1885099
user1885099

Reputation: 150

So, I figured it out. The problem was that the PHP response was not an PHP array. To fix this I made my response an array and added this to my PHP file:

json_encode($tArrx);

And changed my jQuery as follows:

$.ajax({
    type: 'POST',
    url: 'loc/bcheck.php',
    dataType: 'json',
    success: function (data) {
        tArrx = data;
    },
    complete: function(){
        $('.bHr').each(function(){
            curElm = $(this);
            var bTm = curElm.html();
            if ($.inArray(bTm, tArrx) !== -1){
                curElm.addClass('disabled');
                curElm.removeClass('available');
            }
            else{
                curElm.addClass('available');
                curElm.removeClass('disabled');
            }
        });
    }
});

I used the examples from all of you guys to achieve this and I thank you for it. Couldn't have done it without your help!

Upvotes: 0

Threadid
Threadid

Reputation: 760

You have actually created a multidimensional array

tArrx = new Array(data);

So this is how you would match your array

var data = ["1","2","3","4"];
var tArrx = new Array(data);
confirm(tArrx[0]);
confirm(data);
confirm($.inArray('1', tArrx[0]) !== -1);

Better yet simply don't cast data to an array

var data = ["1","2","3","4"];
confirm(data);
confirm($.inArray('1', data) !== -1);

Working example HERE

I modified the example to replicate your conditions as closely as possible. 

var data = '1","2","3","4';
var tArrx = new Array(data);
console.log('data '+data);
console.log('data.length '+data.length);
console.log('data[0] '+data[0]);
console.log('data[1] '+data[1]);
console.log('data[2] '+data[2]);
console.log('data[3] '+data[3]);
console.log(tArrx.length);
console.log(tArrx[0].length);
console.log(tArrx);
console.log(tArrx[0]);
$('.bHr').each(function(){
     curElm = $(this);
     var bTm = curElm.html();
     console.log(typeof bTm);
     console.log($.inArray(bTm, tArrx) !== -1);
     console.log($.inArray(bTm, tArrx[0]) !== -1);
     console.log($.inArray(bTm, data) !== -1);
});

Not having the beginning and ending quotes returned from your PHP request is causing the array assignment to return an array of length 1 populated with a string of length 13. This will cause jQuery.inArray() method to not find a match between 1 and the 13 char string. It can find 1 if you pass the string. Fixing the missing beginning and ending qoutes is going to be your best solution. Look at the console log from the updated working example. 

 data 1","2","3","4
 data.length 13
 data[0] 1
 data[1] "
 data[2] ,
 data[3] "
 1
 13
 ["1","2","3","4"]
 1","2","3","4
 string
 false
 true
 true
 string
 false
 false
 false

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388446

I think the problem is new Array(data), if data is of string type then it creates an array with one element which is the string, else if data is an array then the tArrx will be an array with 1 element which is the array so your $.inArray() will always return -1.

$.ajax({
    type: 'POST',
    url: 'loc/bcheck.php',
    //set datatype as json
    dataType: 'json',
    success: function (data) {
        var tArrx = data;
        $('.bHr').each(function () {
            var curElm = $(this);
            //wrong variable name& you might have to trim the html contents
            var bTm = curElm.html().trim();
            if ($.inArray(bTm, tArrx) !== -1) {
                curElm.addClass('disabled');
                curElm.removeClass('available');
            } else {
                curElm.addClass('available');
                curElm.removeClass('disabled');
            }
        });
    }
});

Upvotes: 1

EGP
EGP

Reputation: 656

Do you have a typo in this line:

    if ($.inArray(bTm, tArrx) !== -1){

shouldn't it be:

    if ($.inArray(Tbm, tArrx) !== -1){

Upvotes: 0

Verhaeren
Verhaeren

Reputation: 1661

It seems to me that you have to cast the variables:

if ($.inArray(bTm.toString(), tArrx) !== -1)

Upvotes: 0

Related Questions