VueJS Axios JSON slice/filter is not a function

Question

I'm new in programming and I'm going to be frontend developer. As part of the exercises i'm trying to do a simple web-app.

But to the point.

I got stuck while trying to filter/slice JSON object - only what I get from the console is: "slice/filter is not a function". I know that those functions are intended for arrays but I have no idea how to conver JSON object to JSON array. I looked a lot of staff in the Internet and tried to implement it but unsuccessfully...

There is the code:

<template>
    <div class="class">
        <section v-if="errored">
            <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
        </section>

        <section v-else>
            <div v-if="loading">Loading...</div>

            <div class="row" v-else>
                <div>
                    <div v-for="vehicle in filteredVehicles">
                        <img v-for="car in vehicle.cars" v-bind:src="car.url" v-bind:alt="car.name">
                    </div>
                </div>
            </div>

        </section>
    </div>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                vehicles: [],
                loading: true,
                errored: false
            }
        },
        mounted() {
            axios
                .get('https://urlurlurl/vehicles.json')
                .then(response => (this.vehicles= response.data))
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false)
        },
        computed: {
            filteredVehicles: function () {
                return this.vehicles.filter(function (v) {
                    return v.name === ('aaa' || 'bbb')
                })
            }
        }
    }
</script>

Sample of how the data is structured:

{
  "1": {
    "firstname": "",
    "lastname": "",
    "age": {
      "1": {
        "name": "",
        "url": ""
      },
      "3": {
        "name": "",
        "url": ""
      }
    }
  },
  "2": {
    "firstname": "",
    "lastname": "",
    "age": {
      "6": {
        "name": "",
        "url": ""
      },
      "7": {
        "name": "",
        "url": ""
      }
    }
  }
  // etc.
}

Thank you in advance for your help.

We'll need to see the structure of your JSON to know how to convert it. — Jacob, Jul 17 '18 at 00:11

score 2 · Accepted Answer · answered Jul 17 '18 at 00:42

It looks like your data is an object of key/value pairs. Unfortunately, the majority of browsers don't support Object.values which will give you an array of just the values of the object:

return Object.values(this.vehicles)    // Array of vehicle objects
  .filter(function (v) {
    return v.name === ('aaa' || 'bbb')
  })

...but there is an Object.keys method which is largely supported, so you can get to the values with a two-step process:

return Object.keys(this.vehicles)     // Array of keys in the JSON obj
  .map(key => this.vehicles[key])     // Array of vehicle objects
  .filter(function (v) {
    return v.name === ('aaa' || 'bbb')
  })

Or if you want to use something like lodash, that gives you some more convenient functions for dealing with manipulating objects.

Thank you for a quick response! I'll check it in the morning because now is the middle of the night and I am exhausted after a long time spent in front of the computer. — David, Jul 17 '18 at 00:58

score 0 · Answer 2 · answered Jul 17 '18 at 00:53

0

put this in your app.js file

Vue.filter('snippet',function (val) {
    return val.slice(0,100);
})

and when you want to use it just put snippest in your html like this.

<p class="card-text mb-auto">{{product.description | snippet}}</p>

answered Jul 17 '18 at 00:53

Mohammed Aktaa

1,215
5
12

VueJS Axios JSON slice/filter is not a function

2 Answers2