Passing JSON response from Axios to a data object but getting errors

Question

I'm trying to pass a JSON response I get back to an empty data object to display search results and getting a typeerror: arr.slice is not a function error. If I add the JSON directly to the "schools" data object, I don't get the error. I think it might have something to do with the format of the JSON? Everything is wrapped in an array called "hit" and I don't think my code is expecting that.

Here's my main App.vue file:

<template>
    <div class="app search">
        <!-- Search header -->
        <header id="searchHeader" class="search--header py-2 py-md-4">
            <div class="container">
                <div class="input-group"> 

                    <!-- Search box -->
                    <SearchBox v-model="searchTerm"/>

                    <!-- Search button -->
                    <button v-on:click="searchSubmit(searchTerm)" class="btn btn-lg btn-white ml-2 px-4 search-submit">Search</button>
                </div>
            </div>
        </header>

        <!-- Main results -->
        <div class="container">
            {{ dataReceived }}

            <!-- Result count and show/sort -->
            <ResultCount v-model="page" :items="schools.length" :perPage="10"/>

            <!-- Results -->
            <SchoolList :schools="pageOfSchools"/>

        </div>
    </div>
</template>

<script>
    import SchoolList from './SchoolList'
    import SearchBox from './SearchBox'
    import getArraySection from '../utilities/get-array-section'

    export default {
        name: 'app',
        components: {SchoolList, SearchBox},
        data: () => ({
            searchTerm: '',
            type: '',
            //schools: [{"found": 18, "start": "0", "cursor": "", "returned": 18, "hit": [ { "name": "State Peter Pan Institute", "city": "New Burniceshire", "state": "Illinois", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/10/State Peter Pan Institute", "schoolLogo": 10 }, { "name": "State Flatland University", "city": "New Ulices", "state": "Maryland", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/75/State Flatland University", "schoolLogo": 75 }, { "name": "State Applewood Halls of Ivy", "city": "East Karimouth", "state": "West Virginia", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/89/State Applewood Halls of Ivy", "schoolLogo": 89 }, { "name": "State Packer Institute", "city": "New Lura", "state": "Wyoming", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/118/State Packer Institute", "schoolLogo": 118 }, { "name": "State Mandingo Academy", "city": "Port Tomas", "state": "Kentucky", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/129/State Mandingo Academy", "schoolLogo": 129 }, { "name": "State Flatland Center", "city": "East Emmettside", "state": "Vermont", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/137/State Flatland Center", "schoolLogo": 137 }, { "name": "State Northern Alma Mater", "city": "Blairville", "state": "WY", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/314/State Northern Alma Mater", "schoolLogo": 314 }, { "name": "State Caper Alma Mater", "city": "Fayburgh", "state": "KS", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/323/State Caper Alma Mater", "schoolLogo": 323 }, { "name": "State Fish Center", "city": "West Yesseniachester", "state": "NC", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/357/State Fish Center", "schoolLogo": 357 }, { "name": "State Pump College", "city": "Saraichester", "state": "NE", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/416/State Pump College", "schoolLogo": 416 }, { "name": "State Collage School", "city": "Laceyfort", "state": "NE", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/431/State Collage School", "schoolLogo": 431 }, { "name": "State Mimosa Lyceum", "city": "Roobville", "state": "NC", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/466/State Mimosa Lyceum", "schoolLogo": 466 }, { "name": "State Collage Seminary", "city": "Cortezborough", "state": "GA", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/469/State Collage Seminary", "schoolLogo": 469 }, { "name": "State Fellowship University", "city": "Olsonside", "state": "NV", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/470/State Fellowship University", "schoolLogo": 470 }, { "name": "State Tomcat Institute", "city": "West Manuelburgh", "state": "GA", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/479/State Tomcat Institute", "schoolLogo": 479 }, { "name": "State Literature University", "city": "North Lorenza", "state": "CT", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/481/State Literature University", "schoolLogo": 481 }, { "name": "State Packer Center", "city": "Port Corbin", "state": "AK", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/496/State Packer Center", "schoolLogo": 496 }, { "name": "State Allegheny Halls of Ivy", "city": "Port Sisterville", "state": "OK", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/571/State Allegheny Halls of Ivy", "schoolLogo": 571 } ]}],
            schools: [],
            page: 1,
            dataReceived: []
        }),
        computed: {
            pageOfSchools: function () {
                return getArraySection(this.schools, this.page, 10)
            }
        },

        mounted() {
            axios.post("/search/college", {
                "search": {"terms": ["state"]}
            })

            .then(response => {
                this.dataReceived = response.data
                this.schools = response.data
                console.log(response.data)
            })
        },

        methods: {
            filterSchools: function () {
                const searchTerm = this.searchTerm.toLowerCase()
                const type = this.type
                let result = schoolData

                if (searchTerm) {
                    result = result.filter(school => {
                        return (
                            school.title.toLowerCase().search(searchTerm) >= 0 ||
                            school.location.toLowerCase().search(searchTerm) >= 0
                        )
                    })
                }

                if (type) {
                    result = result.filter(school => school.type.indexOf(type) >= 0)
                }

                this.schools = result
                this.page = 1
            }
        },
        created: function () {
            this.filterSchools()
        }
    }
</script>

Here's the JSON that's being passed:

{
    "found": 18,
    "start": "0",
    "cursor": "",
    "returned": 18,
    "hit": [{
        "name": "State Peter Pan Institute",
        "city": "New Burniceshire",
        "state": "Illinois",
        "areasofstudy": "Bachelor's",
        "degreetype": "BACHELORS",
        "studenttype": "UG",
        "schoolsnprograms": "state",
        "schoolsize": "1",
        "isCustomer": "0",
        "schoolUrl": "http://localhost/school/10/State Peter Pan Institute",
        "schoolLogo": 10
    }, {
        "name": "State Flatland University",
        "city": "New Ulices",
        "state": "Maryland",
        "areasofstudy": "Bachelor's",
        "degreetype": "BACHELORS",
        "studenttype": "UG",
        "schoolsnprograms": "state",
        "schoolsize": "1",
        "isCustomer": "0",
        "schoolUrl": "http://localhost/school/75/State Flatland University",
        "schoolLogo": 75
    }, {
        "name": "State Applewood Halls of Ivy",
        "city": "East Karimouth",
        "state": "West Virginia",
        "areasofstudy": "Bachelor's",
        "degreetype": "BACHELORS",
        "studenttype": "UG",
        "schoolsnprograms": "state",
        "schoolsize": "1",
        "isCustomer": "0",
        "schoolUrl": "http://localhost/school/89/State Applewood Halls of Ivy",
        "schoolLogo": 89
    }]
}

Answer 1

It seems the SchoolList component requires an array, so you can simply change the line

this.schools = response.data

to

this.schools = response.data.hit

Although, this depends on how the component is built.