Transferring information from MySQL to Vue.js data attribute

Question

Transferring information from MySQL to Vue.js data attribute

I have retrieved some data from MySQL and I am looking to integrate it into a vue.js data property for seamless iteration using v-for.

What is the ideal format to use (JSON or array) and how can I ensure that the data is properly accessible in vue.js?

<?php
  $sql = 'SELECT * FROM courses;';
  $result = mysqli_query($conn, $sql);
  $resultCheck = mysqli_num_rows($result);

  if($resultCheck > 0) {

    $coursesArray = array();
    while ($row = mysqli_fetch_assoc($result)) {

      $courseObj = new stdClass();
      $courseObj->date = $row['date'];
      $courseObj->startTime = $row['start_time'];
      $courseObj->endTime = $row['end_time'];
      $courseObj->availableSeats = $row['seats'];

      array_push($coursesArray, $courseObj);      
    }
    echo json_encode($coursesArray);
  }

?>

...


<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    courses: <?php echo $coursesArray; ?>
    },
  delimiters: ["((","))"],
  methods: {
    flipstate:function(){
      console.log('flipped');
    }
  },
})</script>

javascript mysql vue.js

Answer 1

Answer №1

Initially, it is important to utilize json_encode() on the PHP side to convert your data array into a format that can be utilized by javascript.

Next, there are two approaches you can take to implement it:

a) Embed the JSON-encoded array/object directly into the desired data attribute, for example:

<?php
    $data = array();
    //parse query results, populate $data
?>

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            target_attr: <?=json_encode($data)?>
        },
        . . .
    });
</script>

b) Utilize an ajax call to insert the data from JSON, as shown below:

Your PHP script

<?php
    $data = array();
    //parse query results, populate $data
    echo json_encode(array('returned_data'=>$data));
?>

Your Javascript code

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            target_attr: [] //or {} if expecting an object
        },
        mounted: {
            var vue_instance = this;
            //using jQuery for simplicity
            $.post('/path/to/your/php/file', {some: 'data if needed'}, function(data) {
                var obj = $.parseJSON(data);
                vue_instance.target_attr = obj.returned_data;
            });
        },
        . . .
    });
</script>

Determining the specific code required for everything to function correctly is up to you, but I trust this guidance sets you on the right path. Best of luck!

Answer 2

Initially, it is important to utilize json_encode() on the PHP side to convert your data array into a format that can be utilized by javascript.

Next, there are two approaches you can take to implement it:

a) Embed the JSON-encoded array/object directly into the desired data attribute, for example:

<?php
    $data = array();
    //parse query results, populate $data
?>

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            target_attr: <?=json_encode($data)?>
        },
        . . .
    });
</script>

b) Utilize an ajax call to insert the data from JSON, as shown below:

Your PHP script

<?php
    $data = array();
    //parse query results, populate $data
    echo json_encode(array('returned_data'=>$data));
?>

Your Javascript code

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            target_attr: [] //or {} if expecting an object
        },
        mounted: {
            var vue_instance = this;
            //using jQuery for simplicity
            $.post('/path/to/your/php/file', {some: 'data if needed'}, function(data) {
                var obj = $.parseJSON(data);
                vue_instance.target_attr = obj.returned_data;
            });
        },
        . . .
    });
</script>

Determining the specific code required for everything to function correctly is up to you, but I trust this guidance sets you on the right path. Best of luck!

Transferring information from MySQL to Vue.js data attribute

Answer №1

Similar questions

Combine an array of objects using the main key in each object

NodeJS experiencing a hitch in the image upload process

Fix a typing issue with TypeScript on a coding assistant

Angular template src variable issue with no solution in sight

Is it possible to quickly sync API data with a CSV file for updates?

Having trouble with the CKEditor character count function in JavaScript?

Could one harness the power of SO's script for adding color to code within questions?

Learning about the functions Promise.all and Array.map()

How can I retrieve input value using v-on:change and click events in Vue.js?

What is the reason behind the unnecessary requirement of adding {...props} when passing them to a component in a React router?

Selenium in C#: Timeout issue with SendKeys and Error thrown by JS Executor

transferring information from Facebook to a web address through ZAPIER

Discovering the method for retrieving post parameters in Node.js

What steps can be taken to prompt the layout to transition?

Is it possible to retrieve the BrowserWindow by its unique identifier in Electron?

Obtain GPS coordinates (latitude/longitude) from a Google map by dropping a marker on the

The initial click event for the input element in Jquery is not functioning correctly

Using Selenium to assign properties to JavaScript Objects

The Vue / Firebase App is experiencing issues with the Modal feature due to a lack of definition for '$'

Transform Objects Array from AJAX Response into a Distinct JSON Entity