0
243
ViewsHow can I get the src and ID of an image in an array
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?
3 answers
Answer question0
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>0
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>0
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.