How do I display a specific column from a data vue js + axios?

Question

Okay, I'm new to this and have not got the lexicon mastered yet. Here's what I'm trying to do:

I've successfully read the data from my SQL with axios and in (f12) - network - preview. it shows:

successfully pushed as an array.

But in vue, when I try to display it. it shows: as

[ { "COUNT(`char_id`)": "1" } ]

How do I display ONLY the "1"?

my vue (inside ):

{{onlineUsers}}

(inside script)

data:() => ({
    onlineUsers: [],
)},
created(){
    this.onlineUsersFunction();
},
methods: {
    onlineUsersFunction: function () {
      axios.post(url, { switchCase: 2 }).then((response) => {
        this.onlineUsers = response.data;
      });
    }
}

inside my crud.php

$switchCase = (isset($_POST['switchCase'])) ? $_POST['switchCase'] : '';

switch($switchCase){
    case 1: //Select
        $query = "SELECT * FROM login";
        $stmt = $conn->prepare($query);
        $stmt->execute();
        $data=$stmt->fetchAll(PDO::FETCH_ASSOC);
        break;
    case 2:
        $query = "SELECT COUNT(`char_id`) FROM `char` WHERE `online` = 1;";
        $stmt = $conn->prepare($query);
        $stmt->execute();
        $data=$stmt->fetchAll(PDO::FETCH_ASSOC);
        break;
        
}
print json_encode($data, JSON_UNESCAPED_UNICODE);
$conn = NULL;

not really a vue issue, you should use fetchColumn after changing the query to SELECT COUNT(`char_id`) as users_online FROM.. — Lawrence Cherone
– Lawrence Cherone, Commented Nov 30, 2020 at 23:18

Phil · Accepted Answer · 2020-11-30 23:20:17Z

1

First, your count query only returns one row so there's no need to wrap it in an array by using fetchAll. Try something like this instead

$query = "SELECT COUNT(`char_id`) FROM `char` WHERE `online` = 1;";
$data = ["count" => $conn->query($query)->fetchColumn()];

Then in Vue, simply use

{{ onlineUsers.count }}

You should also set onlineUsers to be an object at initialisation

data: () => ({
  onlineUsers: {},
)},

answered Nov 30, 2020 at 23:20

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

How do I display a specific column from a data vue js + axios?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related