PHP-将json_encode数组传递给jQuery会更改格式和类型

Question

PHP Array Output print_R($color_str);

Array
(
    [0] => '#ff0000','#4caf50','#4caf50','#4caf50','#00bcd4'
    [1] => '#00bcd4','#4caf50','#4caf50','#4caf50','#4caf50'
    [2] => '#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'
    [3] => '#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'
    [4] => '#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'
    [5] => '#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'
    [6] => '#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'
    [7] => '#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'
)

Pass array to jQuery

var color = new Array();
color = <?php echo json_encode($color_str) ?>;

console.log(color); outputs below

["'#ff0000','#4caf50','#4caf50','#4caf50','#00bcd4'", "'#00bcd4','#4caf50','#4caf50','#4caf50','#4caf50'", "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'", "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'", "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'", "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'", "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'", "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'"]

To access the array using key,

for (var i = 0; i < 8; i++) {

    var color_str = [color[i]];
    console.log(color_str); //prints  ["'#ff0000','#4caf50','#4caf50','#4caf50','#00bcd4'"]
    console.log(jQuery.type(color_str)); //prints array
}

The double quotes are creating issue and while replacing it, its type changes to string instead of array

var strReplace = color_str[i].replace(/\,/g, "','");
finalColorStr = "'" + strReplace + "'";

The colors param expect an array as input.

var options = {
                width: 700,
                height: 350,
                legend: {position: 'none'},
                bar: {groupWidth: '50%'},
                isStacked: true,
                colors: finalColorStr
            };

How do I alter the array value to change its format like below and maintaining the type array ?

["#ff0000", "#4caf50", "#4caf50", "#4caf50", "#00bcd4"]

Answer 1

<?php
// that's what you apparently have right now
$x = array(
    "'#ff0000','#4caf50','#4caf50','#4caf50','#00bcd4'",
    "'#00bcd4','#4caf50','#4caf50','#4caf50','#4caf50'",
    "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'",
    "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'",
    "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'",
    "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'",
    "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'",
    "'#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'"
);


$y = array_map( // for each "row" in $x
    function($e) {
        // get everything between ' as one respective element
        preg_match_all("!'([^']+)'!", $e, $m);
        return $m[1];
    },
    $x
);

echo json_encode($y);

that will give you an array of arrays like

[
  ["#ff0000", ..., "#00bcd4"],
  ["#00bcd4", ..., "#4caf50"],
  ...
]

But a better option would be not to start with

array(
  "'#ff0000','#4caf50','#4caf50','#4caf50','#00bcd4'",
  "'#00bcd4','#4caf50','#4caf50','#4caf50','#4caf50'"
  ..
)

anyway. But I don't know if you have a choice or not ....

Answer 2

Array
(
    [0] => Array('#ff0000','#4caf50','#4caf50','#4caf50','#00bcd4'),
    [1] => Array('#00bcd4','#4caf50','#4caf50','#4caf50','#4caf50'),
    [2] => Array('#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'),
    [3] => Array('#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'),
    [4] => Array('#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'),
    [5] => Array('#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'),
    [6] => Array('#4caf50','#4caf50','#4caf50','#4caf50','#4caf50'),
    [7] => Array('#4caf50','#4caf50','#4caf50','#4caf50','#4caf50')
)