Question

所以我一直在使用测试文件尝试从商店中提取Shopify数据。我认为问题在于，api正在请求获取数据，但获取数据所需的时间比运行我的脚本要长。因此变量设置为null。我假设我需要一种方法来检查承诺是否成功和/或将数据写入JSON文件。无论如何，这是代码。运行它时，页面显示为空白。

App.js

 phonecatApp.controller('PhoneListController', function 
 PhoneListController($scope) {
    var products_complete;
    var products = [];


    //init the client
    const client = window.ShopifyBuy.buildClient({
        domain: 'some-site.myshopify.com',
        storefrontAccessToken: 'xxxxxxxxxxxx'
    });

$scope.getShop = function () {
    //get the complete product listings from shopify
    client.product.fetchAll().then((raw_products) => {
        products_complete = raw_products;
        reduce_products();
        $scope.products = $scope.setProductValue();
    });
    //reduce the products list down to necessary information
    function reduce_products() {
        for (var i in products_complete) {
            var product_tmp = products_complete[i];
            var product = {};
            //add name and tags
            product['title'] = product_tmp['title'];
            product['tags'] = product_tmp['tags'];
            product['type'] = product_tmp['productType'];
            product['pic_urls'] = [];
            //add the images 
            for (var j in product_tmp['images']) {
                if (product_tmp['images'][j]['src'] != null) {
                    product['pic_urls'].push(product_tmp['images'][j]['src']);
                }
            }
            product['vars'] = []
            for (var k in product_tmp['variants']) {
                var w = product_tmp['variants'][k]['weight'];
                var p = product_tmp['variants'][k]['price'];
                var a = product_tmp['variants'][k]['available'];
                if (!((typeof w == 'undefined') && (typeof p == 'undefined') && (typeof a == 'undefined'))) {
                    product['vars'].push({
                        'weight': w,
                        'price': p,
                        'available': a
                    });
                }
            }
            //add the current product to the final list
            if (('title' in product) && ('tags' in product) &&
                (product['pic_urls'].length != 0) && 
(product['vars'].length != 0)) {
                products.push(product);
            }
        }



    }


     return products;
}

的index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">

     <head>
     <meta charset="utf-8">
     <title>Google Phone Gallery</title>
     <link rel="stylesheet" 
  href="bower_components/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="app.css" />
     <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>

<script src="https://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>

 <body ng-controller="PhoneListController" ng-cloak>

     <ul>
         <li ng-repeat="product in products">

        <p>{{product.title}}</p>
        </li>
    </ul>

 </body>


</html>

Answer 1

您的本地变量产品在HTML中不可见。您应该在_reduce_products_函数中使用 $ scope.products ，或者返回值并将其分配给 $ scope.products 。

您在HTML中使用的产品 var是$ scope.products，其值为：

$scope.products = $scope.setProductValue();

因此，在您的承诺成功函数中，您应该使用_reduce_products_函数中 reduce 的产品更新 $ scope.products ，或者如果您正在使用 $ scope.products 对于另一个thig，你应该有另一个范围变量。

client.product.fetchAll().then((raw_products) => {
    products_complete = raw_products;
    // What's this? $scope.products = $scope.setProductValue();
    $scope.products = reduce_products(); // return reduced products array
});

使用angularjs

1 个答案: