How to connect to wordpress database and show data from the logged user?

Replies: 0

I’m not a programer. This is my first time coding and first time working with wordpress. It’s just a personal project.
Please have patience with my noob question.

I’m trying to connect to wordpress database and show data from the logged user.
First I got a plugin (https://wordpress.org/plugins/easy-registration-forms/) that allow me to add custom fields into user registration form and then add the answers to wp_usermeta.

Then I found and modify (with a friend’s help) a code that should conect to database and show the data. And it does show the data. But just in localhost (XAMPP). It stops working when I pass the files to wordpress online server by FTP.

How am I suppose to put this code online? Is there a specific folder? Should I make it a Template? I’m totally lost.
The code has two files because that was the only tutorial I could find and understand on how to do.

The error is:

VM184:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.ajax.onreadystatechange (index3.php:33)

Main page:

<table style="text-align: center;">
  <tr>
    <th>Nickname</th>
    <th>First Name</th>
    <th>Pontos de Classe</th>
    <th>Pontos de Raça</th>
    <th>Perfil Vk</th>
  </tr>
  <tbody id="data"> <!-- data will be displayed here -->

  </tbody>
</table>
<div id="div1">

</div>
<script>
    // call ajax
    var ajax = new XMLHttpRequest ();
    var method = "GET";
    var url = "http://my_site.com/data.php";
    var asynchronous = true;

    ajax.open (method, url, asynchronous);
    // sending ajax request
    ajax.send ();

    // receiving response from data2.php
    ajax.onreadystatechange = function ()
    {
      if(this.readyState == 4 && this.status == 200)
      {
        //converting JSON back to array
        var data = JSON.parse(this.responseText);
        console.log(data); //for debugging

        // HTML value for <tbody>
        var html = "";
        // Looping through the data
          var nickname = data.nickname;
          var first_name = data.first_name;
          var user_pc = data.user_pc;
          var user_pr = data.user_pr;
          var user_vk = data.user_vk;

          //storing in html
          html += "<tr>";
            html += "<td>" + nickname + "</td>";
            html += "<td>" + first_name + "</td>";
            html += "<td>" + user_pc + "</td>";
            html += "<td>" + user_pr + "</td>";
            html += "<td>" + user_vk + "</td>";
          html += "</tr>";

          // replacing the <tbody> of <table>
          document.getElementById("data").innerHTML = html;
      }
    }
</script>

Data File:

<?php

//Connect to take data from database
$conn = mysqli_connect("my_db_server", "my_db_user", "my_db_password", "my_db_name");

$user_id =  "1"; // Identify logged user
$query = 'SELECT * FROM wp_usermeta WHERE user_id = ' . $user_id; // Results from this specific User
$result = mysqli_query($conn, $query);

// Create keys and values to ask latter with "data.field_name"
$keys = array();
$values = array();
while ($row = mysqli_fetch_assoc($result))
{
  array_push($keys, $row['meta_key']);
  array_push($values, $row['meta_value']);
}

$return = array_combine($keys, $values);

// Returning responde in JSON format

echo json_encode($return);

Thanks for your help!