Почему мой список продуктов json не загружается?

-3

Мне очень хотелось бы понять, почему мой список не загружается. Вот мой json и jquery, и мой HTML. Консоль показывает 0 ошибок, и список просто выглядит пустым. Я бы очень признателен за помощь, я новичок в этом деле. Спасибо заранее!Почему мой список продуктов json не загружается?

// 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"> \t \t \t \t 
 
    </ul> 
 
</section> 
 
</body> 
 
</html>

источник

2016-07-02 Beatriz Rachel

Что такое 'listview' – brk

Кроме того, я вроде отчаянным, потому что я должен доставить этот код, работающий по понедельнику^_^ –

@ user2181397 ты меня достал. Я не знаю. Я просто скопировал код из другого места и просто изменил переменные, чтобы соответствовать моим потребностям :(Я даже не заметил эту вещь в списке ... :( –

Вы работаете с jQuery Mobile! Таким образом, вы должны включить его в вашу страницу: jquery.mobile-1.4.5.min.js и jquery.mobile-1.4.5.min.css

Пожалуйста, проверьте эту рабочую демо:

// 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-1.12.4.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/> 
 
    <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"> \t \t \t \t 
 
    </ul> 
 
</section> 
 
</body> 
 
</html>

источник

2016-07-02 06:23:24

Более точно сказать, что код, который они скопировали, по-видимому, использует jQuery mobile ... но представляется наиболее вероятной проблемой на данный момент с данной информацией – Assimilater

-1

Вы должны удалить .listView() ссылки. То, что ~~кажется своего рода плагином~~, скорее всего, из jQuery mobile, который вы не указали на своей странице. Так что добавьте в включаемый для предпочтительного варианта Jquery-mobile.js или удалить ссылки на .listView() следующим образом:

var list = $("#ProductList");

В контексте:

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"> \t \t \t \t 
 
    </ul> 
 
</section> 
 
</body>

источник

2016-07-02 06:21:46 nnnnnn

Это jquery mobile, пожалуйста, проверьте мой ответ. –

@ IsmailRBOUH - О, хорошо, круто, спасибо.Я сделал обновление, но, предполагая, что OP пытается использовать jQuery mobile [ваш ответ] (http://stackoverflow.com/a/38157178/615754), это путь. – nnnnnn

, пожалуйста, взгляните на мой фрагмент - это рабочая демонстрация! –

Почему мой список продуктов json не загружается?

ответ

Смежные вопросы