Fetch data from db to js array

Question

So I'm creating a page that has a calendar and I want to display the events that I insert on a different page to the database

How can I display the events on the calendar ?

This is the js code that came with the template (I don't have a lot of js skills)

I think that the part where it displays the events is on the "events: [...] but I don't know how to fetch the data from the database

var initCalendar = function() {
    var $calendar = $('#calendar');
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $calendar.fullCalendar({
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },

        timeFormat: 'h:mm',

        titleFormat: {
            month: 'MMMM YYYY',      // September 2009
            week: "MMM d YYYY",      // Sep 13 2009
            day: 'dddd, MMM d, YYYY' // Tuesday, Sep 8, 2009
        },

        themeButtonIcons: {
            prev: 'fa fa-caret-left',
            next: 'fa fa-caret-right',
        },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                className: 'fc-event-danger'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });

I haven't created the database table yet but I have an idea of how am I going to make it.

You should go through the PHP-MySQL database connectivity and understand CRUD operations later you have to check how to integrate javascript with PHP and HTML — Mangesh Sathe
– Mangesh Sathe, Commented May 6, 2019 at 11:54
Mate I know php + mysql operations I just don't how to fetch the data to javascript array vars — João Neves
– João Neves, Commented May 6, 2019 at 12:02
if you know the DB operations the pull the necessary data from database. Key events : looks like its a JSON, so once you have data array ready from database, just use json_encode to get the proper format. Then using for the event key just integrate json encoded array to event like event : <?php $myJsonCalData; ?> — Mangesh Sathe
– Mangesh Sathe, Commented May 6, 2019 at 12:06

Ikechukwu · Accepted Answer · 2019-05-06 15:05:54Z

2

There are many ways you can achieve this.

The best and simplest way is sending an AJAX REQUEST to your server side script. Your server side scripts query's the database, processes your data and returns a response to your ajax request. Consider doing this with echo json_encode($array_values) in Php. From there you can handle the response using javascript within your ajax request. You may need to parse your response like so var result = JSON.parse(data) in javascript.

For example:

//Within Your HTML Script
axios({
  method: 'POST', //you can set what request you want to be
  url: 'getdb.php',
  data: {id: 1},
})
.then(function (response) {
  // Server side response
  var result = JSON.parse(response.data);
  console.log(result );
})
.catch(function (error) {
  console.log(error);
});

//getdb.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$array_values = array();
// output data of each row
while($row = $result->fetch_assoc()) {
   $array_values[] = $row;
};
echo json_encode($array_values)
$conn->close();
?>

Another way is when you are making server side calls with Php within your HTML. In which case:

    <script>
      var result = JSON.parse(JSON.stringify("<?php echo json_encode($array_values)?>"));
    </script>

Finally, you can embed HTML within Php as well. Which will be:

    <?php
     echo "<script>var result = JSON.parse(JSON.stringify('json_encode({$array_values})'))</script>"
    ?>

Your response from your serverside script would be something like this:

$array_values = array('header' => 
                           array('left' => 'title', 'right' => 'prev,today....'),
                      'timeFormat' => 'h:mm',
                      .....,
                      'events' => array(
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                       )

                )
echo json_encode($array_values );

Then in your javascript you can do something like this:

var result = JSON.parse(response.data);
$calendar.fullCalendar(result);

OR

//independently change each property without affecting others
var result = JSON.parse(response.data);
$calendar.fullCalendar().header= result.header;
$calendar.fullCalendar().timeFormat= result.timeFormat;
$calendar.fullCalendar().events= result.events;

//$calendar.fullCalendar() function is simply accepting an object as a parameter

The reason why you can do this is because the javascript variable result now looks something like this after the SERVER SIDE RESPONSE:

result = {
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },
        timeFormat: 'h:mm',
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
        }

Which obviously depends on how you structured you response from Php;

edited May 6, 2019 at 15:05

answered May 6, 2019 at 14:10

Ikechukwu

1,1451 gold badge13 silver badges30 bronze badges

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

8 Comments

João Neves Over a year ago

So if I go the first option how can I call that data to the code that I posted ?

Ikechukwu Over a year ago

updated. Don't forget to tick this if it was helpful

João Neves Over a year ago

do you have discord or twitter ? so I can talk to you better, I'm a little confused..

Ikechukwu Over a year ago

In what area? And i'm not on twitter. Just IG. Read up a little on javascript objects. This $calendar.fullCalendar() is simply accepting an object as it's parameter

João Neves Over a year ago

Let me see If I'm right.. I create a file called ajax.php (example) and I put the code that is in the first example and then I put the last code (javascript response) in the calendar.js (it's where is located the code from the post I created above)? I just don't see any reference linking both files

|

Amit Bariya · Accepted Answer · 2019-05-06 12:08:54Z

0

use the jquery ajax function to fetch data.

    events: function(start, end, timezone, callback) {
jQuery.ajax({
            url: 'abc.php',
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(responce) {
                var events = responce.bookingData;
                callback(events);
            }
        });
}

answered May 6, 2019 at 12:08

Amit Bariya

253 bronze badges

1 Comment

Mangesh Sathe Over a year ago

He wants to integrate db data to js events. only event key needs data from DB. Ajax call is not required in this case.

Collectives™ on Stack Overflow

Fetch data from db to js array

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related