Получаю данные с сервера json
{"brandList":[{"id":3,"productBrandName":"IKEA"}],
"categoryList":[{"id":3,"categoryName":"household"},{"id":6,"categ oryName":"test"}],
"typeList":[{"id":3,"productTypeName":"soap"},{"id":4,"product TypeName":"soap1"},{"id":5,"productTypeName":"soap 2"},{"id":7,"productTypeName":"ghgh"}],
"productList":[{"productID":6,"productName":"Good Soap","productImageFilePath":"media.gettyimages.co m/photos/colorful-powder-explosion-picture-id550582551","productVendorCode":"qwe","productPri ce":15056.0,"productDescription":"This is a good soap by Armenian brand","productCategoryDto":null,"productTypeDto": null,"productBrandDto":null,"productsActionDto":nu ll},{"productID":7,"productName":"wer","productIma geFilePath":"media.gettyimages.com/photos/colorful-powder-explosion-picture-id550582551","productVendorCode":"wer","productPri ce":156.35,"productDescription":"wer","productCate goryDto":null,"productTypeDto":null,"productBrandD to":null,"productsActionDto":null}]}
все работает только div.style.backgroun = url('переменная'); обращается к картинке через мой localhost
Request URL:
http://localhost:63342/lad/src/main/...re-id550582551
ниже код страницы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
[JS]<script>
var data;
function getList() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
data = JSON.parse(this.responseText);
var category = document.getElementById('searchByCategory');
var type = document.getElementById('searchByType');
var brand = document.getElementById('searchByBrand');
var product = document.getElementById('catalog');
for (var i = 0; i < data.categoryList.length; i++) {
var opt = document.createElement("option");
opt.text = data.categoryList[i].categoryName;
category.options.add(opt, i + 1);
}
for (var i = 0; i < data.typeList.length; i++) {
var opt = document.createElement("option");
opt.text = data.typeList[i].productTypeName;
type.options.add(opt, i + 1);
}
for (var i = 0; i < data.brandList.length; i++) {
var opt = document.createElement("option");
opt.text = data.brandList[i].productBrandName;
brand.options.add(opt, i + 1);
}
for (var i = 0; i < data.productList.length; i++) {
var item_div = document.createElement("div");
item_div.className = "item";
var item_div_productName = document.createElement("div");
var item_div_productImage = document.createElement("div");
var item_div_productPrice = document.createElement("div");
var image_url = data.productList[i].productImageFilePath;
item_div_productImage.style.background = 'url(' + image_url +')';
item_div_productImage.style.visibility = "visible";
item_div_productName.innerHTML = data.productList[i].productName;
item_div_productName.style.visibility = "visible";
item_div_productPrice.innerHTML = data.productList[i].productPrice;
item_div_productPrice.style.visibility = "visible";
item_div.appendChild(item_div_productImage);
item_div.appendChild(item_div_productName);
item_div.appendChild(item_div_productPrice);
product.appendChild(item_div);
}
}
};
xhttp.open("GET", "http://localhost:8080//test", true);
xhttp.send();
}
</script>[/JS]
<link rel="stylesheet" type="text/css" href="../../resources/css/index.css">
</head>
<body onload="getList()">
<div class="searchBlock">
<div>
<select id="searchByCategory">
<option value="default">--||--</option>
</select>
</div>
<div>
<select id="searchByType">
<option value="default">--||--</option>
</select>
</div>
<div>
<select id="searchByBrand">
<option value="default">--||--</option>
</select>
</div>
</div>
<div class="container">
<div class="catalogs" id="catalog" style="visibility: hidden">
</div>
</div>
</body>
</html>