How to read a JSON response from AJAX?

Question

How to read a JSON response from AJAX?

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

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) {

             console.log(info); 

             var cantidad = JSON.parse(info); 

             console.log(cantidad); 
             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">
          <head>
          <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">
            </head>

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

             </div>
               <script src="js/ajaxScript/Ajax.js"></script>
             </body>
             </html>

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?

mysql jquery php json ajax

asked by RolandF 26.04.2018 в 23:57

source

2 answers

0

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

Fill a html table from Javascript dynamically How to remove specific elements within a matrix in Python?

score 1 · Accepted Answer

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>";
console.log(cantidad);
console.log(mostrar);