Js classname doesn't work with fetch json

Question

how is going? So I've made this API code here:

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    // API Endpoint
    var x = document.getElementsByClassName("name1");
    var y = document.getElementsByClassName("name2");
    var i;
    var url = 'mysite.org/api.php'
    // Fetch the remote file
    fetch(url)
    .then(function (request) {
        // Take the request and parse the data as json
        return request.json()
    })
    .then(function (json) {
      // line1
      var name1 = json.item1.name // current song title
      x.innerHTML = name;
      // line2
      var name2 = json.item2.name // current song title
      y.innerHTML = name2;
    });
  });
  </script>
</head>
<body>
  <h5>Hello</h5>
  <div class="name1"></div>
  <div class="name2"></div>
</body>
</html>

api.php ((the json is generated by array from a cicle while))

{"item1":{"id":"1","name":"Daniel"},"item2":{"id":"2","name":"Kalifa"}}

So this code works fine and I can see item1 inside div id name1 and item2 inside div id name2. But I dunno why but when I try to change the elements from ID to CLASS it doesn't work. Any ideas?

I'll bet it's the problem here: https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — Barmar, Mar 24 '21 at 22:16
_"it doesn't work"_ is not a problem description. Describe what happens, what you expect to happen, and include the complete text of any error messages you see. — Tangentially Perpendicular, Mar 24 '21 at 22:16
@Axel10 `getElementsByClassName` does not return a single element. It is not the same as `getElementById`. Have a look at the link posted by @Barmar. — Đinh Carabus, Mar 24 '21 at 22:17
@Barmar i've tried a cicle for by using document.getElementsByClassName but it doesn't work. — Axel10, Mar 24 '21 at 22:19
if there can be multiple, use `for (i = 0; i < x.length; i++) { x[i].innerHTML = name; }` — Barmar, Mar 24 '21 at 22:21
@Barmar what about **json.item1.name**? How can i change item1 with itemN (item1, item2) without repeating the code? — Axel10, Mar 24 '21 at 22:22
Why are you using vanilla JS if you're using jQuery? Personally, I would just ditch the jQuery. Note that `.getElementsByClassName` gives you a live collection. Usually you want to use `.querySelector` or `.querySelectorAll`, so you don't run into unintended issues with your collection. Just comments. — StackSlave, Mar 24 '21 at 22:22
There's nothing in the question about having a variable number of elements in the JSON object. — Barmar, Mar 24 '21 at 22:23
@Barmar you're a legend. Thanks a lot man!!! I really appreciate your help. If you accept donation with coffe and other website stuff just let me know. — Axel10, Mar 24 '21 at 22:26
I was going to edit and clean up the question, but "...from a **cicle** while" — "...i've tried a **cicle** for..." I cannot, for the life of me, figure out what "cicle" is trying to say. — Stephen P, Mar 24 '21 at 23:06

score 1 · Answer 1 · answered Mar 24 '21 at 22:27

Loop over the object keys in the JSON, get the element with the same class, and assign its innerHTML.

Object.entries(json).forEach(([name, value]) => 
    document.getElementsByClassName(name)[0].innerHTML = value);

When you use getElementsByClassName() you need to index it to get the first element with that class.

Js classname doesn't work with fetch json

1 Answers1