DEVHIDE
Login Or Sign up

Quotes Around JavaScript Arrays (Probably Very Easy Fix)

191 Views Asked by At

I'm having a problem with quotes in my arrays, and it's probably a super easy fix, but I just can't figure out how on earth I'm supposed to fix it.

I'm using JQPlot to make charts of my social media information, as in Facebook likes, Twitter followers, etc. Initially when I load up the page I show everything from the past two weeks.

I then added two inputs for date, using CalenderDateSelect, a Prototype library. I use jQuery for everything else except for this, so all my jQuery selectors are:

j$('element').functon();

I bring in my original javascript arrays with the help of PHP. They look like the following:

<script>

likes=[
  <?
    $i = 0;
    while($like = mysql_fetch_assoc($fb_data)) {
        $d_day = date("d-M-y", $like['date']);
        if ($i > 0) {
            echo ',';
        }
        echo "['".$d_day."', ".$like['likes']."]";
        $i++;
    }
  ?>];

<? mysql_data_seek($fb_data, 0); ?>//this resets $fb_data so I can use it again

dislikes=[
  <?
    $i = 0;
    while($like = mysql_fetch_assoc($fb_data)) {
        $d_day = date("d-M-y", $like['date']);
        if ($i > 0) {
            echo ',';
        }
        echo "['".$d_day."', ".$like['dislikes']."]";
        $i++;
    }
  ?>];

<? mysql_data_seek($fb_data, 0); ?>

impressions=[
  <?
    $i = 0;
    while($like = mysql_fetch_assoc($fb_data)) {
        $d_day = date("d-M-y", $like['date']);
        if ($i > 0) {
            echo ',';
        }
        echo "['".$d_day."', ".$like['impressions']."]";
        $i++;
    }
  ?>];

</script>

I then put them into a function:

socialMedia(likes, dislikes, impressions,false);

This function does the following (simplified for readability) 

function socialMedia(likes, dislikes, impressions, bool) {

console.log(likes);
console.log(dislikes);
console.log(impressions);

var plot1 = j$.jqplot('chart1', [likes, dislikes, impressions], {
    title:'Facebook Stats' });

if (bool) {
    plot1.destroy();
    j$.jqplot('chart1', [likes, dislikes, impressions], {
    title:'Facebook Stats' }).replot();
}   

}

The console log here makes the following (it's correct):

[["19-Nov-13", 163], ["20-Nov-13", 163], ["21-Nov-13", 164], ["22-Nov-13", 165], ["23-Nov-13", 168], ["24-Nov-13", 181], ["25-Nov-13", 205], ["26-Nov-13", 226], ["27-Nov-13", 244], ["28-Nov-13", 250], ["29-Nov-13", 269], ["30-Nov-13", 306], ["01-Dec-13", 313], ["02-Dec-13", 315]]

[["19-Nov-13", 0], ["20-Nov-13", 0], ["21-Nov-13", 0], ["22-Nov-13", 0], ["23-Nov-13", 1], ["24-Nov-13", 1], ["25-Nov-13", 0], ["26-Nov-13", 1], ["27-Nov-13", 0], ["28-Nov-13", 1], ["29-Nov-13", 0], ["30-Nov-13", 0], ["01-Dec-13", 0], ["02-Dec-13", 0]]

[["19-Nov-13", 68], ["20-Nov-13", 116], ["21-Nov-13", 63], ["22-Nov-13", 15896], ["23-Nov-13", 79617], ["24-Nov-13", 42948], ["25-Nov-13", 22290], ["26-Nov-13", 1369], ["27-Nov-13", 928], ["28-Nov-13", 921], ["29-Nov-13", 631], ["30-Nov-13", 700], ["01-Dec-13", 743], ["02-Dec-13", 300]]

Note the quotes around the day-month-year.

So far everything works correctly.

I then go and change the end-date (e) and start-date (s) inputs and call this function when I do so:

function getNewSocialData(e, s) {
    j$.ajax({
         type: 'GET',
         url: 'ajax/social_media.php?e='+e+'&s='+s,
         success:function(json){

            data = json;
            data = json.split("T");

            socialMedia(data[0],data[1],data[2],true);
         },
         error: function (xhr, ajaxOptions, thrownError) {
            alert('There appears to be a problem with the information you submitted. Please try again or contact us.');
          }
    });
}

In social_media.php I do the following:

$end_date = date("Y-m-d 00:00", strtotime($_GET['e']));
$start_date = date("Y-m-d 00:00", strtotime($_GET['s']));

$fb_data = getFacebookData(strtotime($start_date), strtotime($end_date));

$inside_likes = array();
$inside_dislikes = array();
$inside_impressions = array();

$i = 0;
while($like = mysql_fetch_assoc($fb_data)) {
    $d_day = date("d-M-y", $like['date']);

    $string = $i != 0 ? ',' : '';

    $inside_likes[] = $string.'"'.$d_day.'",'.$like['likes'];
    $inside_dislikes[] = $string.'"'.$d_day.'",'.$like['dislikes'];
    $inside_impressions[] = $string.'"'.$d_day.'",'.$like['impressions'];

    $i++;
}   

$data['likes'][] = $inside_likes;
$data['dislikes'][] = $inside_dislikes;
$data['impressions'][] = $inside_impressions;

foreach ($data as $data_part) {
   foreach ($data_part as $part) {
       foreach($part as $info) {
           echo $info;   
       }
   echo 'T'; //we split on this 
   }
}

We then take this data and, as you saw int the ajax call, we run it through the socialMedia() function and console.log the data. This time my data is all like the following:

"20-Nov-13",163,"21-Nov-13",164,"22-Nov-13",165,"23-Nov-13",168,"24-Nov-13",181,"25-Nov-13",205,"26-Nov-13",226,"27-Nov-13",244,"28-Nov-13",250,"29-Nov-13",269,"30-Nov-13",306,"01-Dec-13",313,"02-Dec-13",315

"20-Nov-13",0,"21-Nov-13",0,"22-Nov-13",0,"23-Nov-13",1,"24-Nov-13",1,"25-Nov-13",0,"26-Nov-13",1,"27-Nov-13",0,"28-Nov-13",1,"29-Nov-13",0,"30-Nov-13",0,"01-Dec-13",0,"02-Dec-13",0

"20-Nov-13",116,"21-Nov-13",63,"22-Nov-13",15896,"23-Nov-13",79617,"24-Nov-13",42948,"25-Nov-13",22290,"26-Nov-13",1369,"27-Nov-13",928,"28-Nov-13",921,"29-Nov-13",631,"30-Nov-13",700,"01-Dec-13",743,"02-Dec-13",300

And, as you can see, these are not arrays, they're strings, so JQPlot throws the error "uncaught exception: No Data". We then modify the success condition to put them into arrays:

success:function(json){
    var likes = [];
    var dislikes = [];
    var impressions = [];
    var followers = [];
    var following = [];
    var tweets = [];

data = json;
data = json.split("T");

likes.push(data[0]);
dislikes.push(data[1]);
impressions.push(data[2]);
followers.push(data[3]);
following.push(data[4]);
tweets.push(data[5]);

socialMedia(likes,dislikes,impressions,true);
    }....

And it console's the following:

[""20-Nov-13",163,"21-Nov...13",313,"02-Dec-13",315"]
[""20-Nov-13",0,"21-Nov-1...Dec-13",0,"02-Dec-13",0"]
[""20-Nov-13",116,"21-Nov...13",743,"02-Dec-13",300"]

Which has all of my data there, but inside quotes, causing JQPlot to being unable to parse it, and defaults my chart down to December 31st, 1969.

So, my questions: How do I push in the data in such a way so that the quotes don't go around it? I feel I may have a string and an array mixed up here somehow. Can somebody point me in the right direction?

Thanks a million!

EDIT:

Thank you everyone for your help. I'm getting closer. I changed my PHP to run like so:

while($like = mysql_fetch_assoc($fb_data)) {
$d_day = date("d-M-y", $like['date']);

$inside_likes[] = array('"'.$d_day.'",'.$like['likes']);
$inside_dislikes[] = array('"'.$d_day.'",'.$like['dislikes']);
$inside_impressions[] = array('"'.$d_day.'",'.$like['impressions']);
}   

$data['likes'] = $inside_likes;
$data['dislikes'] = $inside_dislikes;
$data['impressions'] = $inside_impressions;

echo json_encode($data);
exit;

And my AJAX call now does the following:

j$.ajax({
         type: 'GET',
         url: 'ajax/social_media.php?e='+e+'&s='+s,
     dataType : "json",
         success:function(json){
            var likes = json['likes'];
            var dislikes = json['dislikes'];
            var impressions = json['impressions'];

    socialMedia(likes, dislikes, impressions, true);
         },
        ...
    });

But now, when I console.log it, I'm getting this, note the double quotes.

[[""19-Nov-13",163"], [""20-Nov-13",163"], [""21-Nov-13",164"], [""22-Nov-13",165"], [""23-Nov-13",168"], [""24-Nov-13",181"], [""25-Nov-13",205"], [""26-Nov-13",226"], [""27-Nov-13",244"], [""28-Nov-13",250"], [""29-Nov-13",269"], [""30-Nov-13",306"], [""01-Dec-13",313"], [""02-Dec-13",315"]]

When I should be getting this:

[["19-Nov-13", 163], ["20-Nov-13", 163], ["21-Nov-13", 164], ["22-Nov-13", 165], ["23-Nov-13", 168], ["24-Nov-13", 181], ["25-Nov-13", 205], ["26-Nov-13", 226], ["27-Nov-13", 244], ["28-Nov-13", 250], ["29-Nov-13", 269], ["30-Nov-13", 306], ["01-Dec-13", 313], ["02-Dec-13", 315]]

Does anybody have any suggestions? Thank you!

SOLUTION:

With help from below, the answer to get the arrays in the string and integer format was to do the following:

while($like = mysql_fetch_assoc($fb_data)) {
$d_day = date("d-M-y", $like['date']);

$inside_likes[] = array($d_day, intval($like['likes']));
$inside_dislikes[] = array($d_day, intval($like['dislikes']));
$inside_impressions[] = array($d_day, intval($like['impressions']));
}   

$data['likes'] = $inside_likes;
$data['dislikes'] = $inside_dislikes;
$data['impressions'] = $inside_impressions;

echo json_encode($data);
javascript arrays jquery jqplot
Original Q&A
1

There are 1 best solutions below

2
On BEST ANSWER

In social_media.php, you seem to be pushing strings instead of arrays.

This seems wrong:

$inside_likes[] = $string.'"'.$d_day.'",'.$like['likes'];

Try this:

$inside_likes[] = array($string.'"'.$d_day, $like['likes']);

It also looks like you're building out your own JSON in a script. That's not a good idea. I'd look into formatting JSON using json_encode().

Update:

Each array should contain two elements: the date string and the number of likes. What you're currently doing is concatenating both into a single string, which is not what you want.

Try this:

$inside_impressions[] = array($d_day, $like['impressions']);

Related Questions in JAVASCRIPT

Related Questions in ARRAYS

Related Questions in JQUERY

Related Questions in JQPLOT

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.