Convert json_encode array into a multidimensional javascript object to use inside Flot

Question

I'm on this trouble since a week from now. I've read a lot of topics here on stackoverflow and on various blogs that I googled but I still need help from you on solving this issue. For many of you this is a dumb question, so I apologize since now for my not so big knowledge of php/javascript languages but I'm in a learning phase and I'm sure you will support me during this formation path.

My main problem is to convert a json_encode output array into something that I can use into Flot that works in javascript.

My current PHP code is the following:

$csv_is_a = str_getcsv(file_get_contents('csv/IS_A.csv'));
$csv_is_q = str_getcsv(file_get_contents('csv/IS_Q.csv'));

for ($i=1, $k=12; $i<12, $k<22; $i++, $k++) {
    $JsonArray[] = array( $csv_is_a[$i] => $csv_is_a[$k]);
}
echo '<pre>';
print_r( $JsonArray );
echo '</pre>';

The output of this code is:

Array (
    [0] => Array
        (
            [2005-09] => 13931
        )

    [1] => Array
        (
            [2006-09] => 19315
        )

    [2] => Array
        (
            [2007-09] => 24006
        )

    [3] => Array
        (
            [2008-09] => 32479
        )

    [4] => Array
        (
            [2009-09] => 42905
        )

    [5] => Array
        (
            [2010-09] => 65225
        )

    [6] => Array
        (
            [2011-09] => 108249
        )

    [7] => Array
        (
            [2012-09] => 156508
        )

    [8] => Array
        (
            [2013-09] => 170910
        )

    [9] => Array
        (
            [2014-09] => 182795
        )

)

Now I apply the json_encode:

$csv_enc = json_encode( $JsonArray );

The output of this is:

[{"2005-09":"13931"},{"2006-09":"19315"},{"2007-09":"24006"},{"2008-09":"32479"},{"2009-09":"42905"},{"2010-09":"65225"},{"2011-09":"108249"},{"2012-09":"156508"},{"2013-09":"170910"},{"2014-09":"182795"}]

But what I want is this:

[[2005-09, 13931],[2006-09, 19315],[2007-09, 24006],[2008-09, 32479],[2009-09, 42905],[2010-09, 65225],[2011-09, 108249],[2012-09, 156508],[2013-09, 170910],[2014-09, 182795]]

In the javascript section of the code I tried to use the JSON.parse() in this way:

<script type="text/javascript">
var data = JSON.parse(<?php echo $csv_enc ;?>);

$(document).ready(function() {
    $.plot($("#placeholder"), [data]);
});
</script>

but it doesn't work. If I substitute the "JSON.parse()" with a bidimensional object, the script works without problems. So, the trouble should be just in that part of the code. What's the issue in your opinions? Thanks for your support.

UPDATE:

I've used the code suggested by @callback, but it doesn't work. Here it is:

<script type="text/javascript">

var theArray = <?php echo $csv_enc; ?>, multiArray = [];

for(var i = 0 ; i< theArray.length ; i++){
    var obj = theArray[i];
    for( k in obj) {
        multiArray[i] = [k, parseInt(obj[k])];
     }
}
console.log(multiArray)

$(document).ready(function() {
    $.plot($("#placeholder"), [multiArray]);
});
</script>

The console.log doesn't print anything...

callback · Answer 1 · 2015-03-22T11:40:33.143

0

Considering that theArray is your input array (the array of objects) and multiArray is the array of arrays that you need, you can do something like this:

var theArray = [{"2005-09":"13931"},{"2006-09":"19315"},{"2007-09":"24006"},{"2008-09":"32479"},{"2009-09":"42905"},{"2010-09":"65225"},{"2011-09":"108249"},{"2012-09":"156508"},{"2013-09":"170910"},{"2014-09":"182795"}], multiArray = [];

for(var i = 0 ; i< theArray.length ; i++){
    var obj = theArray[i];
    for( k in obj) {
        multiArray[i] = [k, parseInt(obj[k])];
     }
}
console.log(multiArray)

This will print your array as follows (in the console):

[["2005-09", 13931],["2006-09", 19315],["2007-09", 24006],["2008-09", 32479], ...]

http://jsfiddle.net/1L344srv/

I dont know if Flot cares about the quotes in the first values of each array in your multiArray but since it is a string anyways, it should be fine.

edited Mar 22 '15 at 11:40

answered Mar 22 '15 at 11:34

callback

3,981
1
31
55

Hello, first of all thank you for your reply. I've tried to use your code, but it doesn't work. Maybe I'm doing something wrong. I'm going to write the code in the post below. – mauro269 Mar 23 '15 at 20:50
can you console.log `theArray` you are getting from `php`? – callback Mar 23 '15 at 22:47
I don't know why, it doesn't give me anything in output. Consider I'm writing this code in Wordpress... – mauro269 Mar 24 '15 at 21:18
So that means that your `var theArray = ` is not working ! – callback Mar 24 '15 at 22:11
And it's strange because `?php echo $csv_enc; ?>` gives a correct output. What should I do in your opinion? Thanks for your support. – mauro269 Mar 25 '15 at 20:28
Read a bit here, and let me know if it helps: http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript – callback Mar 25 '15 at 20:41
Hello callback, I've not replied to you just because I've decided to leave the wordpress platform. Now I'm building my website by myself using php and html. In this way I'll try again your solution hoping to solve my issue. I'll update you asap. Thanks for your support. – mauro269 Mar 29 '15 at 13:07

Convert json_encode array into a multidimensional javascript object to use inside Flot

1 Answers1