2017-04-18 110 views
2

我试图建立一个Vue的模块上我的网站shopify,所以我创建了一个集合JSON端点:shopify AJAX产品在收集

{% layout none %} 
{% paginate collection.products by settings.pagination_limit %} 
    { 
    "results": {{ collection.products | json }} 
    } 
{% endpaginate %} 

当我访问该端点在/收集/集料穴?view = json我得到了所有产品的完整转储,但是当我得到的ajax是没有嵌套产品的集合对象时。

我的ajax:

$.getJSON('/collections/mens-slip-on?view=json', function(response) { 
    console.log(response); 
    that.products = response; 
    }); 

我的结果:

Object {collection: Object} 

collection:Object 
description:(...) 
handle:(...) 
id:(...) 
image:(...) 
products_count:(...) 
published_at:(...) 
title:(...) 
updated_at:(...) 

我Vue的成分在全:

new Vue({ 
el: '#filterable', 
data: { 
collection: null, 
products: null 
}, 

mounted() { 
    this.initCollection(); 
    this.fetchProducts(); 
}, 

methods: { 

initCollection: function() { 
    var currPath = window.location.pathname; 
    this.collection = currPath.substring(currPath.lastIndexOf('/') + 1); 
}, 

fetchProducts: function() { 
    var that = this; 

    $.getJSON('/collections/mens-slip-on?view=json',  function(response) { 
    console.log(response); 
    that.products = response; 
    }); 
} 

} 

}); 

Vue.config.devtools = true; 

看来,不管我把我的collection.json .liquid模板它总是返回集合对象。

更新:我能够通过使用XHR而不是jQuery来解决这个问题来完成ajax调用。看起来这个问题与jQuery getJSON有某种关系,但我不清楚其中的原因。

var httpRequest = new XMLHttpRequest(); 

    httpRequest.onreadystatechange = alertContents; 
    httpRequest.open('GET', '/collections/' + this.collection + '?view=json', true); 
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    httpRequest.send(); 

    function alertContents() { 
    if (httpRequest.readyState === XMLHttpRequest.DONE) { 
     if (httpRequest.status === 200) { 
     var response = JSON.parse(httpRequest.responseText); 

     parent.products = response.results; 
     } 
    } 
    } 
+0

请问您可以添加更多vuejs相关代码吗? –

+0

Vue js代码无关紧要,我只是调用一个运行ajax调用的方法。 –

+0

那有什么相关的? :)当你向Postman中的那个api端点发出GET请求时(希望你使用它),你得到了什么? –

回答

0

我相信你的电话是不正确的。

应该是更像

$.getJSON('/collections/mens-slip-on.json', function(response) { 
    console.log(response); 
    that.products = response; 
    }); 

这将JSON格式返回集合对象。如果你想要所有你需要的产品

$.getJSON('/collections/mens-slip-on/products.json', function(response) { 
    console.log(response); 
    that.products = response; 
    }); 
+0

不,这不是它的记录方式,我使用模板开关变量'view = template_name' –