将来自 Axios 的 JSON 响应传递给数据对象但出现错误

Posted 2023-02-23

【中文标题】将来自 Axios 的 JSON 响应传递给数据对象但出现错误

【英文标题】：Passing JSON response from Axios to a data object but getting errors

【发布时间】：2019-01-24 19:12:57

【问题描述】：

我正在尝试传递一个 JSON 响应，我返回一个空数据对象以显示搜索结果并收到 typeerror: arr.slice is not a function 错误。如果我将 JSON 直接添加到“学校”数据对象，我不会收到错误消息。我认为这可能与 JSON 的格式有关？一切都包含在一个名为“hit”的数组中，我认为我的代码不会这样。

这是我的主要 App.vue 文件：

<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>

这是正在传递的 JSON：

    "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
    ]

【问题讨论】：

您使用的是schoolData，它看起来未定义，您确定您粘贴了所有代码吗？

啊，当我将代码存根时，我正在从一个名为“数据”的静态文件中导入 JSON。 //从'../data'导入schools as schoolData。无论哪种方式，删除引用似乎都没有改变。

这个错误可能是因为返回的json不是一个数组而是一个对象。试试this.schools = [response.data];。看起来更合适。

Doh，做到了...非常感谢！现在还有一个问题......因为返回的 JSON 包含在数组“hit”中，并且我的代码不期望一个数组，它只返回 1 个结果（它认为是“hit”）。我怎样才能强迫它更深入地挖掘一个级别？

可能是this.schools = response.data.hit，但这取决于SchoolList 组件。

【参考方案1】：

看来SchoolList 组件需要一个数组，所以你可以简单地改行

this.schools = response.data

到

this.schools = response.data.hit

不过，这取决于组件的构建方式。