How can I get the src and ID of an image in an array

Question

I made a card as a "dynamic component"... My site can search any artist or song that is on Spotify. Each artist that you search appears in his own card.

I wrote the card, picture and title component in JS. Here is the way I did it:

for(let index = 0; index < artistIdResult.items.length; index++)
{
    var artistImage = document.createElement("input");
    artistImage.className = "artistImage";
    artistImage.type = "image";
    artistImage.src = artistIdResult.items[index].images[0].url;
    artistImage.id = artistIdResult.items[index].id;
    artistImage.width = 100;
    artistImage.height = 100;

    var artistText = document.createElement("h6");
    artistText.className = "artistText";
    var text = document.createTextNode(artistIdResult.items[index].name);
}

(The for just render the number of artist/songs).

When I saw the HTML on the inspector, appears the src, ID and more info from the image:

<input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="7m1DQbleCSsoBv1awh5qmu" width="80" height="80">

How can I get in an array the src and ID of each card where I pressed? I mean... I ask for the data in the JS, the HTML show the src and ID, but how can I get it in a variable and after in array?

Does this answer your question? [JavaScript - get attributes of clicked button](https://stackoverflow.com/questions/39670263/javascript-get-attributes-of-clicked-button) — Heretic Monkey, May 10 '22 at 16:34
You should be careful with tags: [nodejs] indicates you want JavaScript that works on the server, not the browser, whereas [jquery] indicates the opposite. — Heretic Monkey, May 10 '22 at 16:35
@SthatycSoul. I added an answer. Hope that will work as per your expectation. — Debug Diva, May 10 '22 at 19:13

score 0 · Answer 1 · answered May 10 '22 at 17:14

First we open a new array. You can then use jQuery click function to retrieve the values of attributes when clicked on it $(this). And push them to the array. You can check the array by clicking the test button.

jsonArray = [];

$('.albumImage').click(function() {
    getSrc = $(this).attr('src');
    getId = $(this).attr('id');
    jsonArray.push(getSrc);
    jsonArray.push(getId);
});
$('.test').click(function() {
    alert(jsonArray);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="7m1DQbleCSsoBv1awh5qmu" width="80" height="80">

<input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="1" width="80" height="80">

<button class="test">click to see array</button>

Debug Diva · Answer 2 · 2022-05-11T04:29:26.513

If I understand your requirement correctly, you want to access element attribute values in an array. If Yes, You can try this :

console.log(Array.from(document.getElementsByClassName('albumImage')).map(item => {
    return {
    'src': item.getAttribute('src'),
    'id': item.getAttribute('id')
  }
}));

<input class="albumImage" type="image" src="https://i.scdn.co/image1" id="1" width="80" height="80">
<input class="albumImage" type="image" src="https://i.scdn.co/image2" id="2" width="40" height="40">
<input class="albumImage" type="image" src="https://i.scdn.co/image3" id="3" width="20" height="20">

Update : Updating the answer as per the author comment, click event has been added to get the clicked image id and src attribute values.

Demo :

const artistIdResult = {
  items: [{
    images: [{
      url: 'https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651'
    }],
    id: '1',
    name: 'alpha'
  }, {
    images: [{
      url: 'https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651'
    }],
    id: '2',
    name: 'beta'
  }]
};

for(let index = 0; index < artistIdResult.items.length; index++)
{
  var artistImage = document.createElement("input");
  artistImage.className = "artistImage";
  artistImage.type = "image";
  artistImage.src = artistIdResult.items[index].images[0].url;
  artistImage.id = artistIdResult.items[index].id;
  artistImage.width = 100;
  artistImage.height = 100;

  var artistText = document.createElement("h3");
  artistText.className = "artistText";
  var text = document.createTextNode(artistIdResult.items[index].name);
  artistText.append(text);

  document.getElementById('app').append(artistImage)
  document.getElementById('app').append(artistText)

  var div = document.getElementById(artistIdResult.items[index].id);
  div.addEventListener('click', e => {
    console.log('id', e.target.id); // Id of clicked image
    console.log('src', e.target.src); // Src of clicked image
  });
}

<div id="app">
</div>

It works! How can I do for just get 1 specific src and id from a specific card and not the whole cards src and id's? I mean... I have more cards and the array show me all of them, I want just to show the data of the card I clicked... I've been thinking to put "getElementById" but the detail is that the cards are dynamic so how can I know if a click the card "11" and get their data? And not the card "11" and get the data of all? I really appreciate your help. Thanks for the support. — Sthatyc Soul., May 10 '22 at 19:39
@SthatycSoul. I updated my answer as per your comment. I hope it will work as per your expectation now. — Debug Diva, May 11 '22 at 04:29

score -1 · Answer 3 · answered May 10 '22 at 17:15

Have a look at the jQuery click function.

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

This will attach a click handler on the element you're targeting. Inside the callback function you can then access the elements attributes using $(this).

From there you can push data into a global array or similar.

How can I get the src and ID of an image in an array

3 Answers3