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

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

CodePudding user response：

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" />