怎么实现根据后台回传的数据对商品进行排序？

Question

问题描述

现在要做一个商品栏 用ajax从后台调出图片价格人气等数据在前端展示 然后要实现一个排序功能分别能根据价格和人气高低排序 然后就想知道大概思路要怎么做

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

我想过就是在用ajax获取单个商品信息的时候用一个全局数组把价格人气分别存起来然后之后给排序按钮点击可以触发一个函数来根据那个数组来进行排序 但是遇到的问题就是按下按钮时候数组总是undefined 明明前面都能读取成功为什么右面就是return不了里面的数据出来？

Answer 1

//加载每一页商品
function pagePro(pageNum){
    $.ajax({
        url:'http://123.207.52.59:8088/paging',  
        data:{
            "limit":limit,
            "page":pageNum
        },      
        type:'get',        
        dataType:'JSON',        
        success:function(data){
            console.log(data);
             if(data.status==0){
                 alert(msg);
             }else{
                //  清掉原来的产品
                if(things.children.length!=0){
                    cleanPro();
                }
                //  满一页
                 if(data.data.count>=pageNum*limit){
                    for(var i=0;i<limit;i++){
                        price[i] = oPro(data.data.idList[i]);
                    }
                // 不满一页
                }else{
                    for(var i=0;i<data.data.count-(pageNum-1)*limit;i++){
                        oPro(data.data.idList[i]);
                    }
                }
             }
        },
        error:function(){  
            alert("fail!")
        }
      });
}

// 获取单个产品
function oPro(id){
    $.ajax({
        url:'http://123.207.52.59:8088/getInfo',  
        data:{
            "id":id
        },      
        type:'get',        
        dataType:'JSON',        
        success:function(data){
            console.log(data);
            if(data.status==1){
                var pro = document.createElement("div");
                pro.className = "thing";
                things.appendChild(pro);
                var proImg = document.createElement("img");
                proImg.src = data.data.img;
                pro.appendChild(proImg);
                var name = document.createElement("p");
                var proName = document.createTextNode("名称：" + data.data.name);
                name.appendChild(proName);
                pro.appendChild(name);
                var hot = document.createElement("p");
                var proHot = document.createTextNode("人气：" + data.data.hot);
                hot.appendChild(proHot);
                pro.appendChild(hot);
                var price = document.createElement("p");
                var proPrice = document.createTextNode("价格：" + data.data.price);
                price.appendChild(proPrice);
                pro.appendChild(price);
                var intro = document.createElement("p");
                var proIntro = document.createTextNode("描述：" + data.data.introduction);
                intro.appendChild(proIntro);
                pro.appendChild(intro);
                pro.addEventListener("click",function(){showDetail(id);});
                return data.data.price;
            }else if(data.status==0){
                alert(data.msg);
            }
        },
        error:function(){  
            alert("fail!");
        }
      });
}

//按下排序按钮
priceup.onclick = function(){
    console.log(price);    
}

Answer 2

没有代码，让我云分析吗？

我想过就是在用ajax获取单个商品信息的时候用一个全局数组把价格人气分别存起来
遇到的问题就是按下按钮时候数组总是undefined

第一要分析全局数组是否有值，你的 log 中只有 ajax 的请求成功，并不能证明你的全局数组里有值。
第二要分析按下按钮时候数组的值，考虑作用域问题

Answer 3

可以在点击按钮排序时，后端接口支持按不同条件进行查询，将排序好的数据返回给前端进行展示。