Using JQuery to change img src from a js array's value

Question

I have js data in a file named data.js

var data = [
    {
      index: "1",
      flag: "Flag1",
      flag_url: "https://www.w.jpg",
logo:"https://media.geeksforgeeks.org/wpcontent/uploads/20200630132503/iflag.jpg",
      info: "between the...",
      more_info: "With a...",
    },
    {
      index: "2",
      flag: "Flag2",
      flag_url: "https://www.w.jpg",
logo:"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg",
      info: "S will give you...",
      more_info: "lineage contains...",
    },
    {

my app.js has my code to change image on click of an html list

var data = data;
for (let value of data.values()) {

  var logo = value.logo;
  //console.log(logo)

  $('li').on('click', 'a', function() {
    $('#image')[0].src = logo[this.id];
  
});
}

my HTML is set up as such. The 'li' and 'a' tags are necessary for another function I have for a filtered search as user inputs.

                    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for strains..">
                    <ul id="myUL">
                        
                        <li><a id="0"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg" width="20" height="15" > India</a></li>
      
                        <li><a id="1"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg" width="20" height="15" > USA</a></li>
                        
                        <li><a id="2"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg" width="20" height="15" > England</a></li>
                        
                        <li><a id="3"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg" width="20" height="15" > Brazil</a></li>
                        </li>
                    </ul>

I tested the img tag with a different file that had only the logo data and it works. However, I would like to use one file throughout this project. I feel I'm close to getting it. When I console.log(logo) all the src url's are there. However, when I click the list items I receive an error: net::ERR_FILE_NOT_FOUND. I pretty confident it is the last line $('#image')[0].src = logo[this.id];. When I just have $('#image')[0].src = logo; one of the images does come through.. but that's it. I've tried:

$('#image')[0].src = logo[this.value];
$('#image')[0].src = logo[this.key];
$('#image')[0].src = logo[0];
$('#image')[0].src = logo[this.src];

I know it's going to be something simple, but I'm teaching myself JQuery as I go and obviously don't have full understanding of it, yet. Edited content as not to offend

Mohamed-Yousef · Accepted Answer · 2022-05-03 05:04:55Z

2

This is an example of how it should looks like in Jquery

var data = [
    {
      index: "1",
      strain: "Blue Dream",
      strain_url: "https://www.wikileaf.com/strain/blue-dream/",
      logo: "https://assets.wikileaf.com/assets/strains/strain/1632257084_Blue-Dream-Icon.webp",
      info: "A potent cross between the...",
      more_info: "With a relatively high...",
      THC: "Very High",
      CBD: "Very Low",
      Sativa: "Very High",
      Indica: "Very Low"
    },
    {
      index: "2",
      strain: "Sour Diesel",
      strain_url: "https://www.wikileaf.com/strain/sour-diesel/",
     logo:"https://assets.wikileaf.com/assets/strains/strain/1632324991_Sour_Diesel_500x500.webp",
      info: "Sour Diesel will give you...",
      more_info: "Sour Diesel’s lineage contains...",
      THC: "Very High",
      CBD: "Very Low",
      Sativa: "Very High",
      Indica: "Very Low"
    }
 ];
 /* to loop through data */
 /*$.each(data , function(i , el){
  console.log(el.logo);
  // to chagne image src in jquery
  $("img#image-"+ el.index).attr("src" , el.logo);
 })*/
 // to get the data from data by <a> id on click
 $("li").on("click" , "a" , function(){
  let Index = this.id; // or jquery $(this).attr("id");
  $("#image").attr("src" , data[Index].logo);
 });

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

    <li><a id="0"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg" width="20" height="15" > India</a></li>

    <li><a id="1"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg" width="20" height="15" > USA</a></li>

    <li><a id="2"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg" width="20" height="15" > England</a></li>

    <li><a id="3"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg" width="20" height="15" > Brazil</a></li>
    </li>
</ul>

<img id="image" />

edited May 3, 2022 at 5:04

answered May 3, 2022 at 4:24

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shannon Goddard Over a year ago

When I run that code it loads all the "logo" data on every click...

Mohamed-Yousef Over a year ago

@ShannonGoddard My code will run good with my HTML not with yours .. So please provide an HTML sample of your code

Mohamed-Yousef Over a year ago

@ShannonGoddard Also the HTML you'll provide should explain the relation between li , a , img#image

Mohamed-Yousef Over a year ago

@ShannonGoddard answer updated , I added an #image element at the end of the HTML code

Shannon Goddard Over a year ago

YOUR THE BEST! THANK YOU SO MUCH! I've been at this one line for 14 hours and you solved it in 15 minutes.

|

Collectives™ on Stack Overflow

Using JQuery to change img src from a js array's value

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related