Create Jquery array from ajax response

Question

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"]

try to set dataType: 'json' for the ajax request then tArrx = data;... — Arun P Johny
– Arun P Johny, Commented Dec 6, 2014 at 2:13
If I define tArrx manually the function works fine, without having to add '.trim()'. The problem appears when I create the array using 'data'. The content of 'data' is written in the question, 1", "2", "3", "4 — user1885099
– user1885099, Commented Dec 6, 2014 at 2:14
So what does the console log show for tArrx? does it show ["1", "2", "3", "4"] just like data? — EGP
– EGP, Commented Dec 6, 2014 at 2:17

Arun P Johny · Accepted Answer · 2014-12-06 02:15:27Z

1

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

answered Dec 6, 2014 at 2:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

user1885099 Over a year ago

I just get 'tArrx is not defined' now.

Arun P Johny Over a year ago

@user1885099 remove the var infront of var tArrx = data;, I think you are using it else where also

user1885099 Over a year ago

Ok, if I use the .each function inside the 'success' it dosn't do anything when the value is in the array (no error, just nothing). If I use the .each function in 'complete' I get the 'tArrx is not defined' error even though I tried removing 'var' from 'tArrx'.

Threadid · Accepted Answer · 2014-12-06 11:44:29Z

1

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

edited Dec 6, 2014 at 11:44

answered Dec 6, 2014 at 2:26

Threadid

7602 gold badges7 silver badges27 bronze badges

4 Comments

user1885099 Over a year ago

'data' is the response of a PHP file

Threadid Over a year ago

@user1885099 I have the same question as EGP: Can you show console log for tArrx? Console log for tArrx from my example looks like this: [Array[4]] 0: Array[4] 0: "1" 1: "2" 2: "3" 3: "4" length: 4 proto: Array[0] length: 1

Threadid Over a year ago

@user1885099 Did you query the length of data? console.log(data.length);

Threadid Over a year ago

@user1885099 Also query the length of tArrx and tArrx[0]. Look at the updated example.

Verhaeren · Accepted Answer · 2014-12-06 02:02:12Z

0

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

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

answered Dec 6, 2014 at 2:02

Verhaeren

1,6539 silver badges10 bronze badges

2 Comments

user1885099 Over a year ago

If I define tArrx manually the function works fine, without having to add '.toString()'. The problem appears when I create the array using 'data'.

Verhaeren Over a year ago

Well, I'm assuming the toString function is not solving the issue. I'll think somthing else.

EGP · Accepted Answer · 2014-12-06 02:05:30Z

0

Do you have a typo in this line:

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

shouldn't it be:

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

answered Dec 6, 2014 at 2:05

EGP

6565 silver badges11 bronze badges

Comments

user1885099 · Accepted Answer · 2014-12-06 16:15:55Z

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!

Collectives™ on Stack Overflow

Create Jquery array from ajax response

5 Answers 5

3 Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related