Create a 2d javsacript array using data returned from AJAX

Question

I have this hard coded JS 2 dimensional array:

var d = [
    ["05_001","05_002","05_003","05_004","05_005"],
    ["05_006","05_007","05_008","05_009","05_010"]
];

I can confirm this array is working by outputting the data using:

for(var i = 0; i < d.length; i++) {
    var item = d[i];
    for(var j = 0; j < item.length; j++) {
        console.log("item[" + i + "][" + j + "] = " + item[j]);
    }
}

I want to define the array contents using AJAX, and have managed to get so far, using this solution:

How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

This gets the array elements

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}

//get the data back in the right format
var data = getURL("emoji.php?cat=emoticons_travel_places");
alert(data);

The alert outputs this:

["05_001","05_002","05_003","05_004","05_005"],
["05_006","05_007","05_008","05_009","05_010"]

Which is fine, but I'm stuck trying to work out how to get the contents into the 2 dimensional array.

When I try this:

I tried this:

var d = [
    data
];

And then this:

for(var i = 0; i < d.length; i++) {
    var item = d[i];
    for(var j = 0; j < item.length; j++) {
        console.log("item[" + i + "][" + j + "] = " + item[j]);
    }
}

It outputs this:

item[0][0] = [
plugin.min.js:74 item[0][1] = "
plugin.min.js:74 item[0][2] = 0
plugin.min.js:74 item[0][3] = 5
plugin.min.js:74 item[0][4] = _
plugin.min.js:74 item[0][5] = 0
plugin.min.js:74 item[0][6] = 0
plugin.min.js:74 item[0][7] = 1
plugin.min.js:74 item[0][8] = "
plugin.min.js:74 item[0][9] = ,
plugin.min.js:74 item[0][10] = "
plugin.min.js:74 item[0][11] = 0
plugin.min.js:74 item[0][12] = 5
plugin.min.js:74 item[0][13] = _
plugin.min.js:74 item[0][14] = 0
plugin.min.js:74 item[0][15] = 0
plugin.min.js:74 item[0][16] = 2
plugin.min.js:74 item[0][17] = "
plugin.min.js:74 item[0][18] = ,
plugin.min.js:74 item[0][19] = "
plugin.min.js:74 item[0][20] = 0
plugin.min.js:74 item[0][21] = 5
plugin.min.js:74 item[0][22] = _
plugin.min.js:74 item[0][23] = 0
plugin.min.js:74 item[0][24] = 0
plugin.min.js:74 item[0][25] = 3
plugin.min.js:74 item[0][26] = "
plugin.min.js:74 item[0][27] = ,
plugin.min.js:74 item[0][28] = "
plugin.min.js:74 item[0][29] = 0
plugin.min.js:74 item[0][30] = 5
plugin.min.js:74 item[0][31] = _
plugin.min.js:74 item[0][32] = 0
plugin.min.js:74 item[0][33] = 0
plugin.min.js:74 item[0][34] = 4
plugin.min.js:74 item[0][35] = "
plugin.min.js:74 item[0][36] = ,
plugin.min.js:74 item[0][37] = "
plugin.min.js:74 item[0][38] = 0
plugin.min.js:74 item[0][39] = 5
plugin.min.js:74 item[0][40] = _
plugin.min.js:74 item[0][41] = 0
plugin.min.js:74 item[0][42] = 0
plugin.min.js:74 item[0][43] = 5
plugin.min.js:74 item[0][44] = "
plugin.min.js:74 item[0][45] = ]
plugin.min.js:74 item[0][46] = ,
plugin.min.js:74 item[0][47] = 
plugin.min.js:74 item[0][48] = [
plugin.min.js:74 item[0][49] = "
plugin.min.js:74 item[0][50] = 0
plugin.min.js:74 item[0][51] = 5
plugin.min.js:74 item[0][52] = _
plugin.min.js:74 item[0][53] = 0
plugin.min.js:74 item[0][54] = 0
plugin.min.js:74 item[0][55] = 6
plugin.min.js:74 item[0][56] = "
plugin.min.js:74 item[0][57] = ,
plugin.min.js:74 item[0][58] = "
plugin.min.js:74 item[0][59] = 0
plugin.min.js:74 item[0][60] = 5
plugin.min.js:74 item[0][61] = _
plugin.min.js:74 item[0][62] = 0
plugin.min.js:74 item[0][63] = 0
plugin.min.js:74 item[0][64] = 7
plugin.min.js:74 item[0][65] = "
plugin.min.js:74 item[0][66] = ,
plugin.min.js:74 item[0][67] = "
plugin.min.js:74 item[0][68] = 0
plugin.min.js:74 item[0][69] = 5
plugin.min.js:74 item[0][70] = _
plugin.min.js:74 item[0][71] = 0
plugin.min.js:74 item[0][72] = 0
plugin.min.js:74 item[0][73] = 8
plugin.min.js:74 item[0][74] = "
plugin.min.js:74 item[0][75] = ,
plugin.min.js:74 item[0][76] = "
plugin.min.js:74 item[0][77] = 0
plugin.min.js:74 item[0][78] = 5
plugin.min.js:74 item[0][79] = _
plugin.min.js:74 item[0][80] = 0
plugin.min.js:74 item[0][81] = 0
plugin.min.js:74 item[0][82] = 9
plugin.min.js:74 item[0][83] = "
plugin.min.js:74 item[0][84] = ,
plugin.min.js:74 item[0][85] = "
plugin.min.js:74 item[0][86] = 0
plugin.min.js:74 item[0][87] = 5
plugin.min.js:74 item[0][88] = _
plugin.min.js:74 item[0][89] = 0
plugin.min.js:74 item[0][90] = 1
plugin.min.js:74 item[0][91] = 0
plugin.min.js:74 item[0][92] = "
plugin.min.js:74 item[0][93] = ]
plugin.min.js:74 item[0][94] = 

So rather than an array which is 5 by 2, it seems to be an array which is 1 by 95, since there is an element for every character from the data returned by the AJAX call.

In case it is relevant, this is the PHP code for "emoji.php"

<?php
$root="../../../";
include $root . 'config/init.php';
require $root . 'vendor/autoload.php';

$foo = "test";

$cat = $_GET['cat'];

$sql = "SELECT fld_unicode FROM xx_plugs_emojis WHERE fld_category = :cat LIMIT 10";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':cat', $_GET['cat']);
$stmt->execute();
$ct = $stmt->rowCount();

$str = NULL;
$max = $ct;
$row_count = 5;
$i = 1;

while ($row = $stmt->fetch()){

    $emoji = $row['fld_unicode'];

    $rem = $i % $row_count;

    if ($rem === 1) {
        $str .= "[";
    }

    if ($rem > 0 && $i != $max) {
        $str .= "\"$emoji\",";
    } else {
        $str .= "\"$emoji\"";
    }

    if ($rem === 0 && $i < $max) {
        $str .= "],\n";
    }

    if ($i === $max) {
        $str .= "]\n";
    }

    $i++;

}

echo $str;
?>

Answer 1

While your hard-coded array is a two-dimensional array of strings, the data returned by AJAX call is a plain string and is treated like one. In case you want to get an array from server, you should use JSON.

First of all, the string returned by PHP script is not a valid JSON. To make it valid, wrap it with additional square brackets, so that it should look like this:

[["05_001","05_002","05_003","05_004","05_005"],
["05_006","05_007","05_008","05_009","05_010"]]

After that, you need to do small changes in your function getURL : wrap result of AJAX call in JSON.parse() method:

function getURL(url){
    return JSON.parse($.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText);
}

Alternatively, you can specify the return type of AJAX call:

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        dataType: 'json',
        cache: false,
        async: false
    }).responseText;
}