I'm creating Google Chrome Extension, and declared a function in background.js that is hitting a API and should return a value but it is returning undefined value. Writing console log before return statement has value.
var produImage;
function getImage() {
fetch('/api/images.json').then(
function (response) {
response.json().then(function (data) {
var dataresponse=data.results;
for (var obj = 0; obj < dataresponse.length; obj++)
{
produImage=dataresponse[0].url_170x135;
//console.log writing value
console.log(produImage);
//returning undefind
return produImage;
}
});
}
);
}
//call to function
'<td><img width="50" height="50" src="' + getImage() + '"/></td>'
Issue
console.log(produImage)
giving value
return produImage
returning undefind
Edited
Also tried as suggested by Chris
function getImage() {
return fetch('/api/images.json').then(
function (response) {
return response.json().then(
function (data) {
;
return data.results[0].url_170x135;
}
);
}
);
}
and then call to function
getImage().then(function (imageSrc) {
const html = `<td><img width="50" height="50" src="${imageSrc}"/></td>`;
});
but still I can't concatenate value to var result getting undefined
I want to concatenate like this:
result = `<tr>
<td>${How To concatenate Here}</td>
<td>${dResponse[obj].category_path}</td>
<td>${dResponse[obj].price}</td>
</tr>`;
Please suggest me, how can I get plain result from getImage() that is returning promise object?