Problem with assigning and displaying the PHP data array in the vue.js variable-CodePudding

I have a problem with assigning an array of data from a PHP session variable to a variable in VUE.js

This is how I assign a variable with an array of data to a variable in Vue.js:

permissions:['<?php echo json_encode($_SESSION['permissions']) ?>'],

When I console.log it looks like this:

[
    "[{\"id\":\"4\",\"name\":\"admin\",\"uprawnienia\":\"ACUD\"},{\"id\":\"5\",\"name\":\"admin2\",\"uprawnienia\":\"0CUD\"}]"
]

And when I var_dump() $_SESSION variable:

array(2) { [0]=> array(3) { ["id_grupy"]=> string(1) "4" ["name"]=> string(6) "admin" ["uprawnienia"]=> string(4) "ACUD" } [1]=> array(3) { ["id_grupy"]=> string(1) "5" ["name"]=> string(9) "admin2" ["uprawnienia"]=> string(4) "0CUD" } }

What is expected is displaying e.g. data from the uprawnienia field, but the data array assigned to the variable behaves like a string, because when I try to:

console.log(this.permissions[0][0])

It gives me '[' only.

I apologize in advance as it is trivial and I have not noticed a solution but I am new to these things.

CodePudding user response：

When you do json_encode in php. You convert php array into a string.

JSON is not javascript object, but a string which can be parsed into javascript object.

So on client side, you need to use JSON.parse to convert that string into javascript object (in your case array).

Something like below should work:

permissions: JSON.parse('<?php echo json_encode($_SESSION['permissions']) ?>')

CodePudding user response：

Here's a quick code sample I did from the a Vue quickstart CDN:

<?php
$mock_session_var = [
    [
        "id" => "4",
        "name" => "admin",
        "uprawnienia" => "ACUD",
    ],
    [
        "id" => "5",
        "name" => "admin2",
        "uprawnienia" => "0CUD",
    ],
];
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
    const {createApp} = Vue;

    createApp({
        data()
        {
        const permissions = JSON.parse(`<?= json_encode($mock_session_var) ?>`);
            console.log(permissions[0].uprawnienia);
            return {
                message: 'Hello Vue!',
            };
        }
    }).mount('#app');
</script>
</body>
</html>

This PHP code prints the following HTML/js :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
    const {createApp} = Vue;

    createApp({
        data()
        {
            const permissions = JSON.parse(`[{"id":"4","name":"admin","uprawnienia":"ACUD"},{"id":"5","name":"admin2","uprawnienia":"0CUD"}]`);
            console.log(permissions[0].uprawnienia);
            return {
                message: 'Hello Vue!',
            };
        }
    }).mount('#app');
</script>
</body>
</html>

Edit : I think the main reason your code isn't working is that you're printing it inside a string (which itself is inside an array). You can just print it directly, but be careful of invalid JS code when the PHP variable is null as it won't print anything.