Dynamic Img Src URL within a DIV within Script using Javascript

Question

I am trying to insert a dynamic url within a img src.

Below is my HTML and Script code. OnClick of a tab, I am calling a GET HTTP Method, which responds with image url. I want to use this image url with the img src field.

HTML Code

        ....
        <li>
          <a href="#" class="tm-tab-link" data-id="hot" onclick="isValid();" id="login">Reviews</a>
        </li>
        ...
        <div id="hot" class="tm-tab-content">
          <div class="tm-list">
              <div class="features_items" id="name"></div>
          </div>
        </div>
        ....

Script -

$("#login").on("click", function isValid() {
    
    $.ajax({
        url: "https://xyz.foo.net/super",
        type: 'GET',
        success: function(data) {
                
            var name = "";
            for(var i=0;i<=data.length-1;i++){
            name += '<div class="tm-list-item">' +
      
                // how to add the image url below DYNAMICALLY? 
                // how to insert data[i].img ?

              '<img src="??????????" id=image1 alt="Image" class="tm-list-item-img">' +  
                        '<div class="tm-black-bg tm-list-item-text">' +
                            '<h3 class="tm-list-item-name">' + data[i].name + '</h3>' +
                            '<p class="tm-list-item-description">' + data[i].review + '</p>' +       
                        '</div> ' +
                     '</div>' 
            }
            
            $("#name").html("");
            $("#name").append(name);
        },
        error: function(e) {
            alert("Refresh Page");
        }
    });

});

Sample JSON Response -

[
 {
  "name":"John",
  "review":"awesome product",
  "img":"https://img.com/cats"
  },
  {
  "name":"Shawn",
  "review":"good product",
  "img":"https://img.com/dogs"
  }
]

Aml · Accepted Answer · 2021-11-04 11:36:49Z

2

i just replace url with jsonplaceholder to test

also , id must be unique that's not releated with your problem .

$.ajax({ url: "https://jsonplaceholder.typicode.com/photos", type: 'GET', success: function(data) {

      console.log(data);

      for(var i=0;i<=data.length-1;i++){
      name += '<div class="tm-list-item">' +


        '<img src="'+data[i].url+'"   id="image' + i + '" alt="Image" class="tm-list-item-img">' +  
                  '<div class="tm-black-bg tm-list-item-text">' +
                      '<h3 class="tm-list-item-name">' + data[i].name + '</h3>' +
                      '<p class="tm-list-item-description">' + data[i].review + '</p>' +       
                  '</div> ' +
               '</div>' 
      }

      $("#name").html("");
      $("#name").append(name);
  },
  error: function(e) {
      alert("Refresh Page");
  }

});

edited Nov 4, 2021 at 11:36

answered Nov 4, 2021 at 9:26

Aml

8516 silver badges8 bronze badges

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

1 Comment

Jeremy Thille Over a year ago

Good answer, and good observation about non-unique IDs. I took the liberty to turn your code into a snippet, and to slightly improve it by replacing $("#name").html(""); $("#name").append(name); with $("#name").html(name);

Jeremy Thille · Accepted Answer · 2021-11-04 09:41:33Z

0

Use backticks ( ` ) instead of simple quotes ' or double quotes ". Backticks support string interpolation ${...} and multiline :

name += `<div class="tm-list-item">
              <img src="${data[i].img}" id="image${i}" alt="Image" class="tm-list-item-img"/>
              <div class="tm-black-bg tm-list-item-text">
                    <h3 class="tm-list-item-name">${data[i].name}</h3>
                    <p class="tm-list-item-description">${data[i].review}</p>
               </div> 
        </div>`;

EDIT :

As @AmlKamel_ said, you can't have the same ID multiple times in your document. By adding i to it, you make unique IDs.

edited Nov 4, 2021 at 9:41

answered Nov 4, 2021 at 9:19

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Collectives™ on Stack Overflow

Dynamic Img Src URL within a DIV within Script using Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related