1

I'm trying to make a small webpage and use Airtable as a database. My base includes a few fields. The most important are "name" and "icon_png" I use vue.js, log in via axios and get all database in one array, named items. When I want to list names I can do in on html-side using <... v-for="item in items">, but it's only rendering.

Now I need pass all names as one variable to a child component via "props". How I can manipulate with arrays and send names from array "items" to array e.g. "names"?

P.S.Later I also have to put all images in a separated array for another component.

Here is my code for JS. And I have no idea, how to put names in "names"

const app = new Vue({
    el: '#wrapper',
    data: {
        items: [],
        names:[],
    },
    methods: {
        loadItems: function(){                        
            var self = this
            var app_id = "MY_ID";
            var app_key = "MY_KEY";
            this.items = []
            axios.get("https://api.airtable.com/v0/" + app_id + "/MY_BASE/?view=webpage",
                { 
                    headers: { Authorization: "Bearer "+app_key } 
                }
            ).then(function(response){
                self.items = response.data.records
            }).catch(function(error){
                console.log(error)
            })
        },
    },
    mounted(){
        this.loadItems();
    },
})
Stan
  • 11
  • 1
  • what are the data in `response.data.records`?. – Yoarthur Jan 05 '19 at 16:58
  • When I access it from the html-side I get array of object that construction: `{ "id": "some_id", "fields": { "Name": "my_name", "my_field": [ { "id": "some_id", "url": "https://....pdf", "filename": "my_name.pdf", "size": 12243, "type": "application/pdf", "thumbnails": { "small": { "url": "https.....jpg", "width": 32, "height": 32 }, "large": { "url": "https......jpg", "width": 320, "height": 172 } } } ], "my_field": [ "my_name" ] }, "createdTime": "2018-08-02T13:36:55.000Z" }` And I need to get all "my_name" under "Name" field to separate array. Fields/names "my_..." are from database. – Stan Jan 05 '19 at 19:08

2 Answers2

2

You can map your records:

const app = new Vue({
    el: '#wrapper',
    data: {
        items: [],
        names:[],
    },
    methods: {
        loadItems: function(){                        
            var self = this
            var app_id = "MY_ID";
            var app_key = "MY_KEY";
            this.items = []
            axios.get("https://api.airtable.com/v0/" + app_id + "/MY_BASE/?view=webpage",
                { 
                    headers: { Authorization: "Bearer "+app_key } 
                }
            ).then(function(response){
                const ret = response.data.records
                self.items = ret.map(e => e.name)
            }).catch(function(error){
                console.log(error)
            })
        },
    },
    mounted(){
        this.loadItems();
    },
})
Sombriks
  • 3,370
  • 4
  • 34
  • 54
0

I did it by straight rewriting names in a new array. Thank you for your help.

const app = new Vue({
    el: '#wrapper',
    data: {
        items: [],
        names:[],
    },
    methods: {
        loadItems: function(){                        
            var self = this
            var app_id = "MY_ID";
            var app_key = "MY_KEY";
            this.items = []
            axios.get("https://api.airtable.com/v0/" + app_id + "/MY_BASE/?view=webpage",
                { 
                    headers: { Authorization: "Bearer "+app_key } 
                }
            ).then(function(response){
                self.items = response.data.records
                for (i in Object.keys(self.items)){
                    self.names[i]=self.items[i].fields.Name
                }
            }).catch(function(error){
                console.log(error)
            })
        },
    },
    mounted(){
        this.loadItems();
    },
})
Stan
  • 11
  • 1