【问题标题】:Why isn't my json product list loading?为什么我的 json 产品列表没有加载?
【发布时间】:2016-07-02 14:27:53
【问题描述】:

我真的很想知道为什么我的列表没有加载。 这是我的 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">				
    </ul>
</section>
</body>
</html>

【问题讨论】:

  • 什么是listview
  • 我也有点绝望,因为我必须在周一之前交付这段代码 ^_^
  • @user2181397 你找到我了。我不知道。我只是从其他地方复制了代码,只是更改了变量以满足我的需要:(我什至没有注意到这个 listview 的东西...... :(
  • 除非您澄清,否则无法提供帮助。还有这个下拉列表是如何与 json 表相关的
  • 你真的应该试着把这样的问题分解成几部分,试着理解每一部分。 Stack Overflow 不是免费的程序员租用服务......如果您可以识别特定问题,则更容易通过搜索引擎(即时结果)获得帮助,如果您不确定快速搜索,那么可以很好的资源

标签: javascript jquery html json


【解决方案1】:

您正在使用 jQuery Mobile !所以你需要将它包含在你的页面中:jquery.mobile-1.4.5.min.jsjquery.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">				
    </ul>
</section>
</body>
</html>

【讨论】:

  • 更准确地说,他们复制的代码似乎使用了 jQuery mobile……但在给定信息的情况下,这似乎是目前最可能的问题
【解决方案2】:

您需要删除 .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">				
    </ul>
</section>
</body>

【讨论】:

  • 这是 jquery mobile 请查看我的回答。
  • @IsmailRBOUH - 哦,对了,很酷,谢谢。我进行了更新,但假设 OP 正在尝试使用 jQuery mobile your answer 是要走的路。
  • 请看看我的 sn-p 是一个工作演示!
  • 其实这个 jquery 手机对我有很大帮助。非常感谢你
  • @BeatrizRachel - 如果你想要 jQuery mobile,那么你应该接受 Ismail's answer 而不是我的,因为 Ismail 发现了这一点,我只是为了完整起见将它编辑到我的回复中(但我没有把它放进去我的演示,因为我没有想出它)。如果你想要 jQuery mobile,那么我的回答会告诉你该怎么做。
猜你喜欢
  • 1970-01-01
  • 2021-10-12
  • 2021-10-14
  • 2011-07-12
  • 1970-01-01
  • 2020-11-08
  • 2023-02-03
  • 2015-12-24
  • 2012-01-09
相关资源
最近更新 更多