Vue组件中ajax获取JSON并赋值后对数据变量不能使用sort排序。

hermanhe
  • 117

问题描述

我在使用axios获取来自服务器的JSON数据后,赋值到 .vue 组件中的数据变量,然后通过methods创建方法来修改 数据变量 的排序,但使用sort()方法并用webpack打包后,sort()方法是生效的,但报错并影响到echats图表生成。

问题出现的环境背景及自己尝试过哪些方法

开发环境是:nodeJS + webpack + vue + axios + echarts
1、尝试了重新解析JSON成字符串再打包成JSON,看看是否是JSON问题,结果并不是。
2、删除了echarts,看看是不是echarts问题,结果只是少了个报错。
3、用新的变量装原数据变量,再使用sort,结果还是一样报sort is not a function。

相关代码

main.vue文件:

<template>

<div class="container content_area">
    <div class="row">

            <div class="col-12">
                <div class="charts">
                    <div id="main_charts" style="height: 100%"></div>
                </div>
                    <!-- 图饼 -->
                <div class="content_title">销量总表</div>
                <table class="table table-striped">
                      <thead>
                        <tr>
                          <th scope="col">#</th>
                          <th scope="col">名称</th>
                          <th scope="col">单价</th>
                          <th scope="col">销量</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">1</th>
                          <td>Mark</td>
                          <td>Otto</td>
                          <td>@mdo</td>
                        </tr>
                        <tr>
                          <th scope="row">2</th>
                          <td>Jacob</td>
                          <td>Thornton</td>
                          <td>@fat</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td>Larry</td>
                          <td>the Bird</td>
                          <td>@twitter</td>
                        </tr>
                      </tbody>
                </table>
                <!-- 表格完成 -->
                    
                    
                    
        </div>
            
    </div>
</div>

</template>

<script>
//echarts图表插入
import {pie} from './pie.js';

export default{

data(){
    return {all_data:""}
},
mounted:function(){
    var _self=this;
    var myDate=new Date();
    if(eval(myDate.getMonth()+1)<10){
        var month="0"+eval(myDate.getMonth()+1);
    }else{
        var month=eval(myDate.getMonth()+1);
    }
    if(myDate.getDate()<10){
        var day="0"+myDate.getDate();
    }else{
        var day=myDate.getDate();
    }
    
    var dateNow=myDate.getFullYear() +'-'+ month +'-'+ day;
    var post_date={"dateNow":dateNow};
    
    axios.post('http://127.0.0.1:8080/today',post_date).then(results=>{
    
    _self.all_data=results.data;
    
    }).catch(function(err){console.log(err)});
    
pie();
},
methods:{
    "topOne":function(){
        //以下是不可用
        console.log(this.all_data);
        var JsonA=this.all_data.sort(function(a,b){return b.order_num - a.order_num});
        return JsonA[0].order_name;
        
        //以下是新建JSON可用
        var JsonB=[{'name','test1','age','12'},{'name':'test3','age':'32'},{'name':'test2','age':'22'}];
        return JsonB.sort(function(a,b){return a.age - b.age});
        
    }
}

}

</script>

这是Vue中all_data的数据(内容来于服务端返回数据):
图片描述

你期待的结果是什么?实际看到的错误信息又是什么?

错误报告如下:
图片描述
希望大神们能看到,我已经想了半天,只能上来求助了。谢谢。

回复
阅读 3k
4 个回答

在data内初始化all_data的时候应该初始化为一个数组,而不是字符串,只有初始化为数组的话才能访问到数组原型上的sort方法。

参考了“念着倒以可你”的答案,写了一挺笨的方法,就是写多一个数组变量,将原来的JSON用for循环放进去,然后再通过这个数组使用sort。

"topOne":function(){
    /*这里如果不定义这个带有属性的空数组,那么return的时候就会找不到order_name这个属性而报错,
    不知道有没有大神给个建议,要怎样改会比较好?
    异步获取数据总是因为VUE生命钩子经常挂不上对应数据就直接渲染到HTML文档上了*/
    
    var arr=[{'order_name':'','order_unit':'','order_num':''}];
    for(var i = 0 ; i < this.all_data.length ; i++){
        arr[i]=this.all_data[i];
    };
    var sortArray = arr.sort((a,b)=>{return a.order_num - b.order_num});
    return sortArray[0].order_name;

}

sort是数组的方法,你的all_data是字符串那肯定报错呀

我觉得你要操作接口返回的数据的话,还是最好把这个方法的调用放在响应成功的回调里面把

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏