How do I make Vue.js repeat the values from this JSON file?

Question

So I have a JSON file from the Etsy API that returns the listings and their info. I want to get the title, url for the product, first image of the product, price, shop title, and shop url for each product, which is in this JSON (this is the first product):

    {
  "count": 657352,
  "results": [
    {
      "title": "Clink illustration print - rosy pink cheeks nerds kissing - perfect gift for your love, a wedding, valentine, or anniversary",
      "price": "20.00",
      "url": "https:\\/\\/www.etsy.com\\/listing\\/55086613\\/clink-illustration-print-rosy-pink?utm_source=producttemp&utm_medium=api&utm_campaign=api",
      "Images": [
        {
          "listing_image_id": 333410839,
          "hex_code": "EAEBEB",
          "red": 234,
          "green": 235,
          "blue": 235,
          "hue": 180,
          "saturation": 0,
          "brightness": 92,
          "is_black_and_white": false,
          "creation_tsz": 1335891579,
          "listing_id": 55086613,
          "rank": 1,
          "url_75x75": "https:\\/\\/img1.etsystatic.com\\/000\\/0\\/5470068\\/il_75x75.333410839.jpg",
          "url_170x135": "https:\\/\\/img1.etsystatic.com\\/000\\/0\\/5470068\\/il_170x135.333410839.jpg",
          "url_570xN": "https:\\/\\/img1.etsystatic.com\\/000\\/0\\/5470068\\/il_570xN.333410839.jpg",
          "url_fullxfull": "https:\\/\\/img1.etsystatic.com\\/000\\/0\\/5470068\\/il_fullxfull.333410839.jpg",
          "full_height": 594,
          "full_width": 700
        }
      ],
      "Shop": {
        "shop_name": "GenevieveSantos",
        "url": "https:\\/\\/www.etsy.com\\/shop\\/GenevieveSantos?utm_source=producttemp&utm_medium=api&utm_campaign=api"
      }
    },

I used this to make the request for the data:

https://openapi.etsy.com/v2/featured_treasuries/listings?api_key=&includes=Images:1:0,Shop(shop_name,url,)&fields=title,price,url&limit=42

Now I'm using Vue.js to repeat the first 42 listings on a 3 x 14 grid in an html file but I'm having trouble reaching into the arrays just to return the first image and the title. Here is the HTML:

        <section class="listings">
          <div v-repeat="42" class="column" id="listings">
              <a href={{item_url}}>
                  <img src={{url_fullxfull}}>
                  <h4>{{title}}</h4>
              </a>
              <a href="{{url}}">
                  <p class="username">{{shop_name}}</p>
              </a>
              <p class="price">{{price}}</p>
          </div>
        </section>

Here is the JS that grabs the JSON file and tries to make a Vue object:

$.getJSON('../../api/etsy/listings.json')
.then(function(listings){
  var listings = new Vue({
    el: '#listings',
    data: {
      title: titles,
      images: images,
      price: prices,
      url: urls
    }
  });
});

So basically I want the url_fullxfull, title, price, url, shop_name, and shop url to fill in that html and repeat that block of html 42 times. Any suggestions? Thank you!

Answer 1

For HTTP requests, you should use the Vue Resource library: https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.3/vue-resource.min.js

Then you can write the code like this:

<div v-repeat="etsyData">
    ...
</div>

var vue = new Vue({
    el: '#app',

    data: {
        apiUrl: "........",
        etsyData: {}
    },

    ready: function(){  
        this.$http.get(this.apiUrl, function(data, status, request){
            this.etsyData = data;
        })
    }
})

You've put the number 42 in your v-repeat instead of the actual vue property.

If you insist on using jquery instead, then you have to access the vue object from the outside, like this: vue.etsyData = data, or if the data object is in side a component, it will be something like this: vue.$children[0].etsyData = data.