Output php data into jquery array?

Question

I'm creating a timeline using timesheet.js. The data will be input via custom fields in Wordpress. I want to be able to output that php data into the jquery array. Is that possible?

This is my php loop:

<?php if( have_rows('timeline') ):
    while ( have_rows('timeline') ) : the_row();
        echo the_sub_field('start_date');
        echo the_sub_field('end_date');
        echo the_sub_field('description');
        echo the_sub_field('name');
    endwhile;
endif; ?>

Here's the jquery, each time the php loops through I want it to output in the format:

<script type="text/javascript">
jQuery(function($) {
    $(document).ready(function() {    

        new Timesheet('timesheet', 2002, 2013, [
          ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
          ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
          ['2003', 'Had very bad luck'],
          ['10/2003', '2006', 'At least had fun', 'dolor'],
          ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
          ['07/2005', '09/2005', 'Bad luck again', 'default'],
          ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
          ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
          ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
          ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
          ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
        ]);

    });
});
</script>

Create an array of you data in php encode it to a json and read the json string in jquery — Jelle Keizer
– Jelle Keizer, Commented Dec 17, 2014 at 14:18

Elias Van Ootegem · Accepted Answer · 2014-12-17 14:21:55Z

4

It's quite simple to do this, really: just construct the array in php, and echo its json_encoded value:

<?php
$array = array();
if( have_rows('timeline') ) {
    while ( have_rows('timeline') ) : the_row();
        $array[] = array(
            the_sub_field('start_date'),
            the_sub_field('end_date'),
            the_sub_field('description'),
            the_sub_field('name')
        );
    endwhile;
    echo '<script> var theArray = '.json_encode($array).';</script>';
} ?>

Job done, you now have a JS variable called theArray, and its value will be an array of arrays, containing all of the data you need to create new Timesheet('timesheet', 2002, 2013, theArray);

answered Dec 17, 2014 at 14:21

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

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

6 Comments

Rob Over a year ago

Just so I understand it, that will output the equivalent of the jquery in my question? Do I need to do anything else with it?

Elias Van Ootegem Over a year ago

@Rob: from what you've told us in your question, the output will be what you need it to be. Just pass the array to the Timesheet constructor, like I did and you should be good to go

Rob Over a year ago

Ok great, that makes sense, thanks very much. (Bear with me on accepting the answer!)

Phil Tune Over a year ago

@Rob, jQuery arrays = Javascript arrays... jQuery doesn't have any different syntax (to my knowledge) of creating arrays (though it does have some simple syntax methods for arrays/objects). json_encode will create JSON (= correct Javascript notation) for exactly the purpose you're looking for.

Elias Van Ootegem Over a year ago

@philtune: Just in case you weren't 100% sure: jQuery does not, and never will have a different syntax for arrays, simply because jQuery is JavaScript, hence what is valid in JS, is valid in jQ, too.

|

Phil Tune · Accepted Answer · 2014-12-17 14:36:07Z

0

Yes, you need to echo <script> tags and you can generate any Javascript you want:

<?php
echo '<script>';
if( have_rows('timeline') ):
    echo 'var foo = ['
    while ( have_rows('timeline') ) : the_row();
        echo '"'.the_sub_field('start_date').'",';
        echo '"'.the_sub_field('end_date').'",';
        echo '"'.the_sub_field('description').'",';
        echo '"'.the_sub_field('name').'"';
    endwhile;
    echo '];';
endif;
echo '</script>';
?>

edited Dec 17, 2014 at 14:36

answered Dec 17, 2014 at 14:18

Phil Tune

3,3824 gold badges27 silver badges53 bronze badges

4 Comments

Rob Over a year ago

Oh, didn't realise that! That that php will literally output the jquery below?

Elias Van Ootegem Over a year ago

@Rob: it won't, because this code will not quote any of the values, and will generate invalid syntax. Use json_encode instead (JSON == JavaScript Object Notation)

Phil Tune Over a year ago

Actually, @EliasVanOotegem's answer makes more sense. Build your array first then echo it json_encoded. My answer is just the concept. His is how I would actually do it.

Phil Tune Over a year ago

Also @Rob, the reason his is better is because using json_encode you can create multidimensional arrays and complex objects, and json_encode will just spit it out correctly every time, while in my example you would echo every single piece creating more work and creating opportunities for errors...

Collectives™ on Stack Overflow

Output php data into jquery array?

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related