Beatriz Rachel Beatriz Rachel - 5 months ago 14
JSON Question

Why isn't my json product list loading?

I'd really like to understand why isn't my list loading.
Here is my json and jquery, and my HTML.
The console shows 0 errors, and the list just appears blank. I'd really appreciate some help, I'm new to this json thing. Many thanks in advance!




// Json array
var productList = {"products": [
{"description": "Bata Bordada", "color": "amarelo", "size":"P", "price": "390"},
{"description": "Chapéu de Praia com Fivela", "color": "cinza", "size":"M", "price": "390"},
{"description": "Vestido Texturizado", "color": "branco", "size":"G", "price": "390"},
{"description": "Bata Bordada", "color": "branco", "size":"GG", "price": "390"},
{"description": "Chapéu de Praia com Fivela", "color": "amarelo", "size":"36", "price": "390"},
{"description": "Vestido Texturizado", "color": "azul", "size":"38", "price": "390"},
{"description": "Bata Bordada", "color": "cinza", "size":"40", "price": "390"},
{"description": "Chapéu de Praia com Fivela", "color": "branco", "size":"42", "price": "390"},
{"description": "Vestido Texturizado", "color": "cinza", "size":"44", "price": "390"}
]
};


function loadList() {

var list = $("#ProductList").listview();
list.sort();

$(productList.products).each(function(index){
$(list).append(
'<li class="product-it"> <article class="product"> <span class="prd-img-wrapper"> <img class="prd-img" src="img/vestido1.jpg"></span> <h2 class="prd-tit">' + this.description + '</h2> <span class="prd-wrap"><span class="prd-price"><span class="prd-prc">' + this.price + '</span></br> <span class="prd-par">até 5x de R$30,00</span></span><a class="prd-cart" href="#">Adicionar ao carrinho.</a></span></article></li>');
});

$(list).listview("refresh");

}

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Teste Vaga Front End</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/js.js"></script>
</head>
<body onLoad="loadList()">
<section class="products">
<header class="products-hdr">
<h3 class="mobile-btn order">Ordenar</h3>
<select class="prd-order">
<option value="MaisRecentes">Mais Recentes</option>
<option value="MaiorPreco">Maior Preço</option>
<option value="MenorPreco">Menor Preço</option>
</select>
</header>
<ul id="ProductList" class="product-lt">
</ul>
</section>
</body>
</html>




Answer

You need to remove the .listView() references. That seems to be some sort of plugin is likely from jQuery mobile which you have not included on your page. So add in an include for your preferred version of jquery-mobile.js, or remove references to .listView() as follows:

var list = $("#ProductList");

In context:

var productList = {"products": [
        {"description": "Bata Bordada", "color": "amarelo", "size":"P", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "cinza", "size":"M", "price": "390"},
        {"description": "Vestido Texturizado", "color": "branco", "size":"G", "price": "390"},
        {"description": "Bata Bordada", "color": "branco", "size":"GG", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "amarelo", "size":"36", "price": "390"},
        {"description": "Vestido Texturizado", "color": "azul", "size":"38", "price": "390"},
        {"description": "Bata Bordada", "color": "cinza", "size":"40", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "branco", "size":"42", "price": "390"},
        {"description": "Vestido Texturizado", "color": "cinza", "size":"44", "price": "390"}
    ]};

function loadList() {

    var list = $("#ProductList");
    // list.sort(); commented because this won't do anything useful

   $(productList.products).each(function(index){
    $(list).append(
        '<li class="product-it"> <article class="product"> <span class="prd-img-wrapper"> <img class="prd-img" src="img/vestido1.jpg"></span> <h2 class="prd-tit">' + this.description + '</h2> <span class="prd-wrap"><span class="prd-price"><span class="prd-prc">' +  this.price + '</span></br> <span class="prd-par">até 5x de R$30,00</span></span><a class="prd-cart" href="#">Adicionar ao carrinho.</a></span></article></li>');
   });
}
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body onload="loadList()">
<section class="products">
    <!-- header element with select omitted for brevity -->
    <ul id="ProductList" class="product-lt">				
    </ul>
</section>
</body>