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 >'
// how to add the image url below DYNAMICALLY?
// how to insert data[i].img ?
'<img src="??????????" id=image1 alt="Image" >'
'<div >'
'<h3 >' data[i].name '</h3>'
'<p >' 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"
}
]
CodePudding user response:
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 >' '<img src="' data[i].url '" id="image' i '" alt="Image" >' '<div >' '<h3 >' data[i].name '</h3>' '<p >' data[i].review '</p>' '</div> ' '</div>' } $("#name").html(""); $("#name").append(name); }, error: function(e) { alert("Refresh Page"); }
});
CodePudding user response:
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.
CodePudding user response:
Variable interpolation in the template string can be achieved in the following way:
'<img src="${data[i].img}" 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>'