How to append multiple values with ajax

Question

On response i got multiple items, i want to append every item in response on h2 class. My code simply loop every items in one class <h2 id="test">

this is my try:

$(function() {

  var $test = $('#test').one();

  $.ajax({

    type: 'GET',
    url: 'test.json',
    contentType: "application/json; charset=utf-8",
    dataType: "json",

    success: function(tests) {
      <!-- <!-- console.log(gares) --> -->

      $.each(tests, function(index, item) {
        $tests.append('<h2>' + item[1] + '</h2>');
      });
    }

  });

});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

<h2 id="test"></h2>
<h2 id="test"></h2>

Please do NOT [use the same id for more than 1 element](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme#5611973) — Alexandre Elshobokshy, Jan 22 '19 at 14:44
`contentType: "application/json; charset=utf-8",` — You are making a GET request. There is no content to specify the type of. — Quentin, Jan 22 '19 at 14:55

score 0 · Answer 1 · answered Jan 22 '19 at 14:47

0

It loops over 1 item only because you're using id and not class, try changing your HTML to :

<h2 class="test"></h2>
<h2 class="test"></h2>

And then your JS should look like this :

var $test = $('.test')

I would suggest reading this.

answered Jan 22 '19 at 14:47

Alexandre Elshobokshy

10,720
6
27
57

Yeah thanks got it now.. So the id must be unique on page , – JavaCrypT Jan 22 '19 at 14:50
But still confused why it's print All items on each class – JavaCrypT Jan 22 '19 at 14:51
@JavaCrypT still confused about what? – Alexandre Elshobokshy Jan 22 '19 at 14:51
i want to loop every item and append all item one by one on h2 Class for example : **file.json** { "name":"John", "name":Test", "name":"Jack" } **it should print**
John

Test

Jack
– JavaCrypT Jan 22 '19 at 14:56
@JavaCrypT it's still not clear what you're trying to explain. Loop through what? Both `h2` tags? And append what inside them? – Alexandre Elshobokshy Jan 22 '19 at 14:58
@JavaCrypT the example JSON you specified is not valid, objects should have *unique* keys, you probably rather mean `{"persons": [{"name": "John"},{"name": "Test"},{"name": "Jack"}]}` – webketje Jan 22 '19 at 15:00
Yeah how to loop each name and print it with H2 tag with same class ? – JavaCrypT Jan 22 '19 at 15:04
@JavaCrypT this is another question, the original question has been answered. I encourage you to try yourself and then ask another question if you get stuck. – Alexandre Elshobokshy Jan 22 '19 at 15:06

How to append multiple values with ajax

1 Answers1

John

Test

Jack