How can I grab a specific element of an AJAX SQL callback (array) to variables?

Question

When a user clicks on a link within the navbar of my web application the link's name gets assigned to a javascript variable ('team'). The variable then is sent to php via AJAX "POST" to use it for a mySQL query to populate the dashboard with new data. I got everything running but the success function of the AJAX part.

When i try to grab the dashboard inputs for the html div update I fail to correctly grab the information needed which is sent as array in the callback.

According to the developer tool network debug i have the following json array as callback in the php part:

array(7) { ["team_id"]=> string(1) "2" ["name"]=> string(17) "Borussia Dortmund" ["logo"]=> string(56) "https://github.com/Phanti1893/dasocc/blob/master/165.png" ["founded"]=> string(4) "1909" ["venue_capacity"]=> string(5) "81365" ["squad_value"]=> string(3) "634" ["total_national_trophies"]=> string(2) "12" }

When i use the following success function, I just get an 'y' in the html container (which obviously is the 4th index figure within the callback in 'array'). Here i want to grab the single elements within the array to populate my dashboard at the frontend(.selectedClub is one example of many):

$('ul.subbar li a').on('click', function(e) { // Start function when user clicks on a team in the navbar
e.preventDefault(); // Stop loading new link?
var team = $(this).html(); // Assign clicked team name to variable
$.ajax({
  method: "POST",
  url: "includes/script.php",
  data: {team: team},
  data_type: "json",
  success: function(data) {

    $('.selectedClub').html(data[4]);


    }


  });


console.log(team); // check for console, remove later




});

this is my php script that makes the SQL query with the variable 'team':

<?php
  include_once 'dbh.inc.php';

   if (isset($_POST['team'])) {
     $team = $_POST['team'];

  $sql = "SELECT * from teams WHERE name = '$team';"; // task sent to server
  $result = mysqli_query($conn, $sql); // returns object resource
  $teamarray = $result->fetch_assoc(); // pass object to an array
  $name = $teamarray ["name"];
  $logo = $teamarray ["logo"];
  $founded = $teamarray ["founded"];
  $venue_capacity = $teamarray ["venue_capacity"];
  $squad_value = $teamarray ["squad_value"];
  $total_national_trophies = $teamarray ["total_national_trophies"];

var_dump($teamarray);

}
?>

EDIT: I guess the problem is that I don't get a JSON array in return but plain HTML/text due to chrome developer tools:

Connection: Keep-Alive
Content-Length: 341
Content-Type: text/html; charset=UTF-8
Date: Sun, 22 Sep 2019 09:11:57 GMT
Keep-Alive: timeout=5, max=97
Server: Apache/2.4.41 (Win64) OpenSSL/1.1.1c PHP/7.3.9
X-Powered-By: PHP/7.3.9

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Sep 22 '19 at 08:47
Thanks for the highlighting, I will look into it and try to improve my code in that matter. But could you also give me some hint on the described issue? — JSRB, Sep 22 '19 at 09:04

score 0 · Answer 1 · answered Sep 22 '19 at 09:23

0

This should really be a comment but I'm still working on my reputation...

I can't work out why you expected data[4] to be "y"

I suggest that you console log the returned data to see exactly what is returned from the Ajax call. I don't grok php but it looks like the returned value you saw is an object not an array and you might want to be accessing data.name instead of an array element, but console log it first

answered Sep 22 '19 at 09:23

John Webster

39
5

when i console.log 'data' in javascript i get the same content as in the array shown at the very top of the initial post. I assume I have to manipulate the callback datatype first to be able to grab elements? It seems to be plain html/text? – JSRB Sep 22 '19 at 09:40

score 0 · Accepted Answer · answered Sep 22 '19 at 11:52

After two days of debugging it now worked as follows, the key was to encode the SQL object into JSON array and parse that one in the javascript code to be able to grab the data properly.

Thanks for your inputs nevertheless, much appreciated.

javascript/AJAX:

$('ul.subbar li a').on('click', function(e) { // Start function when user clicks on a team in the navbar
e.preventDefault(); // Stop loading new link?
var team = $(this).html(); // Assign clicked team name to variable
$.ajax({
  method: "POST",
  url: "includes/script.php",
  data: {team: team},
  data_type: "json",
  success: function(team) {

    team = $.parseJSON(team);
    console.log(team);
    $('.selectedClub').html(team.name);
    $('#founded').html(team.founded);
    $('#venue_capacity').html(team.venue_capacity);
    $('#squad_value').html(team.squad_value);
    $('#total_national_trophies').html(team.total_national_trophies);
    $('#teamlogo').attr({src: team.logo});


    }

  });

});

<?php

  include_once 'dbh.inc.php';

   if (isset($_POST['team'])) {
     $team = $_POST['team'];

  $sql = "SELECT * from teams WHERE name = '$team';"; // task sent to server
  $result = mysqli_query($conn, $sql); // returns object resource
  $teamarray = $result->fetch_assoc(); // pass object to an array
  $name = $teamarray ["name"];
  $logo = $teamarray ["logo"];
  $founded = $teamarray ["founded"];
  $venue_capacity = $teamarray ["venue_capacity"];
  $squad_value = $teamarray ["squad_value"];
  $total_national_trophies = $teamarray ["total_national_trophies"];

echo json_encode($teamarray); // changes object into json format
//var_dump($teamarray);

}
?>

How can I grab a specific element of an AJAX SQL callback (array) to variables?

2 Answers2