How to read a JSON response from AJAX?


How about? You see, I'm learning ajax and json; while I was doing some tests, I have a question that I have not been able to clarify and I would like you to help me.

I explain: I have a code where I make an ajax request to get certain information from the database. The answer is in json format, and I want to show that information in a div with id = result.

I currently have this:

File Empresa.php

       require_once "../../model/Conexion.php";

       class Empresa {

       public function __construct(){

        public function Num_Empresa(){
        global $conexion;
        $sql = "SELECT count(*) as CantidadEmpresas FROM empresa";
        $query = $conexion->query($sql);
        return $query;

CompanyController.php file

        require_once "../Modelos/Empresa.php";

         $objEmpresa = new Empresa();

         $data = Array();

         $query_list = $objEmpresa->Num_Empresa();

         if ($query_list) {

         while ($resp = $query_list->fetch_object()) {
         $data[] = array("Cantidad"=>$resp->CantidadEmpresas);


            echo json_encode($data);
                    } else {
                   echo "error";

Ajax.js file

         $(document).ready(function() {
         mostrar_Cantidad_Empresas ();

          function mostrar_Cantidad_Empresas () {

            _ajax("../Controllers/EmpresaController.php", "")
             .done( function (info) {


             var cantidad = JSON.parse(info); 

             var mostrar = "<p> La cantidad de Empresas es: " +//el resultado debería estar aquí. +"</p>"; 

               $("#resultado").html(mostrar); //aqui mostramos el resultado.


              function _ajax(url, data) {

              var ajax = $.ajax({
              "method" : "POST",
               "url" : url,
               "data" : data

               return ajax;

File main.php

         <!DOCTYPE html>
          <html lang="en">
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <!-- Meta, title, CSS, favicons, etc. -->
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!-- Bootstrap -->
          <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
           <!-- Font Awesome -->
           <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
           <!-- NProgress -->
           <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
           <!-- iCheck -->
           <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">

            <body class="nav-md">
            <div class="container body">
             <div id="resultado">

               <script src="js/ajaxScript/Ajax.js"></script>

When consulting the console, I have this result:

As you will see, if I am receiving the answer. But when I tried to access the amount, undefined appears through the console. How would you access that data?

asked by RolandF 26.04.2018 в 23:57

2 answers


The property is called Cantidad in uppercase, and not in lowercase. Your code should read:

var cantidad = [
    Cantidad: "2",
var mostrar = "<p> La cantidad de Empresas es: " + cantidad[0].Cantidad + "</p>";
answered by 27.04.2018 / 11:05

Your Json is an array of objects. To display the amount you must do so:

var mostrar = "<p> La cantidad de Empresas es: " + cantidad[0].cantidad;
answered by 27.04.2018 в 00:26