1
votes

Ecrire la réponse de l'API au HTML

J'ai une réponse API comme celle-ci:

$(function() {
  $.ajax({
    url: 'https://api-url',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      $.each(data, function(value) {
        //append each row data to datatable
        var row = value.total
        $('#total').append(row);
      });
    }
  })
})

Je veux écrire la valeur total de la réponse ci-dessus, 5 , à mon HTML. Lorsque je crée le fichier js pour obtenir la réponse, le résultat en HTML est vide.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

<div class="inner">
  <h3 id="total"></h3>
  <p>Total</p>
</div>

{
  "status": 200,
  "message": "OK",
  "data": {
    "total": 5
  }
}

Savez-vous comment afficher le total que je veux de l'API en HTML? Merci

javascript jquery

1 commentaires

N'utilisez pas append () mais la fonction text () de jQuery ou innerHTML si vous ne souhaitez utiliser aucun framework. Vous pouvez ajouter des éléments DOM, mais ce n'est qu'une chaîne / un nombre, donc text () suffit pour cela.

4 Réponses :

0
votes

Utilisez innerHTML pour insérer une valeur

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>

  <div class="inner">
          <h3 id="total"></h3>
          <p>Total</p>
        </div>

var a= {
   "status": 200,
   "message": "OK",
   "data": {
   "total": 5
    }
 };
 document.querySelector('#total').innerHTML=a.data.total

0 commentaires

2
votes

Vous n'avez pas besoin d'une boucle each () ici car la réponse est un objet unique, pas un tableau. En tant que tel, vous pouvez accéder à data.value et le définir comme text () de #total , comme ceci:

$(function() {
  $.ajax({
    url: 'https://api-url',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
      var total = response.data.total;
      $('#total').text(total);
    }
  })
})

0 commentaires

0
votes

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

<div class="inner">
  <h3 id="total"></h3>
  <p>Total</p>
</div>

/* $(function() {
  $.ajax({
    url: 'https://api-url',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
      var total = 0;
      for (var i = 0; i < response.length; i++) {
        total = total + response[i].data.total;
      }
      $('#total').text(total);
    }
  })
}) */
// for ex.: -
const data = [{
  "status": 200,
  "message": "OK",
  "data": {
    "total": 5
  }
}, {
  "status": 200,
  "message": "OK",
  "data": {
    "total": 5
  }
}, {
  "status": 200,
  "message": "OK",
  "data": {
    "total": 5
  }
}];
var total = 0;
for (var i = 0; i < data.length; i++) {
  total = total + data[i].data.total;
}
$('#total').text(total);

0 commentaires

0
votes

essayez ceci, je pense que ça devrait être du travail

 $('#total').append(`<p>${row}</p>`)
    {
  "status": 200,
  "message": "OK",
  "data": {
    "total": 5
  }
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="inner">
  <h3 id="total"></h3>
  <p>Total</p>
</div>
$(function() {
  $.ajax({
    url: 'https://api-url',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        var row = data.data.total
        $('#total').text(row);
      });
    }
  })
})

0 commentaires