How to get data from mysql database on Webhost and store it into a Javascript variable?

Question

we are working on a university project and we are now facing this big problem. We are using React and Javascript and we need to get some data from a MYSQL database on 000webhost.com and simply store them on a Javascript variable. We searched a lot on the internet but we coudln't find any solution, probably just because we are missing something important or we don't understand something properly. This is the PHP file hosted on Webhost000 which works perfectly:

<?php
//Connect to DB
$servername = "localhost";
$username = "id1761679_nedo93";
$password = "*********";
$dbname = "id1761679_mrtdb";

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

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

//Name Array Selector
$queryN = "SELECT Name FROM persontable";
$name = mysqli_query($conn, $queryN) or die ("no query");

$name_array = array();
while($row = mysqli_fetch_assoc($name)) {
   $name_array[] = $row;
}   

$nameJSON = json_encode($name_array);

echo $nameJSON;

?>

This file's URL is https://nedo93.000webhostapp.com/phpgetcoords.php and in fact if you click on it, it should echo all names stored in database in a JSON format.

Now, we just need to pass this json variable to a javascript which is not running on Webhost but is running in a Node terminal on a PC.

We tried AJAX and everything we could find on Google and Youtube but nothing seems to work, we are quite desperate.

Even if it shouldn't be relevant for the question, this is the Javascript file on which we need to store the data in order to associate names and coordinates with a deck.gl layer and display them on a map. The only problem is to link the data from dabase with a variable in this file:

import React, {Component} from 'react';
import DeckGL, {PathLayer} from 'deck.gl';
import DeckGL, {ScatterplotLayer} from 'deck.gl';

var currPos = null;
var vname = null; 

//This is the function we are trying but it's not working, the variable vnam is empty.

(function () 
  {   
    $.ajax({                                      
      url: 'https://nedo93.000webhostapp.com/phpgetcoords.php',                          
      data: "",                                 
      dataType: 'json',                     
      success: function(data)          
      {                      
        vname = data[1];         
      } 
    });
  });




//Position tracker
navigator.geolocation.watchPosition(

function(position) {
    currPos = position;
},
   function(error){
       console.log(error);
   }
);

export default class DeckGLOverlay extends Component {  

  static get defaultViewport() {
    return {
      longitude: 11.20, //11.25,
      latitude: 43.77, //43.77,
      zoom: 16,
      maxZoom: 18,
      pitch: 40, //viewport tilt
      bearing: 0
    };
  }

  _initialize(gl) {
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
  }
    //Add in const { }, new layers's ID
  render() {
    const {viewport, scatters, pos, icon, paths, trailLength, time} = this.props;   

    //Add another instance of a new layer here:

    const layers = [      
      new ScatterplotLayer({
        id: 'scatters',
        data: scatters,     
        radiusScale: 100,
        outline: false
       }),
      new ScatterplotLayer({
        id: 'pos',
        data: pos,
        getPosition: a => [currPos.coords.longitude, currPos.coords.latitude, 1],
        radiusScale: 100,
        outline: false
       }),    
       new PathLayer({
        id: 'paths',
        data: paths,        
        rounded: true,
        getColor: paths => [255, 0, 0, 255],
        getWidth: paths => 0.03,
        widthScale: 100
      })
    ];  

    return (
      <DeckGL {...viewport} layers={layers} onWebGLInitialized= this._initialize} />
    );      
  }    
}

Thanks in advance to anybody who can help us.