第二个接口获取的数组怎么继承第一个接口获取数组的属性？

Question

问题描述：

开发过程遇到一个问题，我举个例子。
图1是第一个循环出来的效果，正常的。

图2数据循环出来了，但是想要对应的数字和tab1对应的数字的颜色一样

JS

$.ajax({

  type: "get",  
  dataType: "json",  
  url: "xx.json&type="+type,
  success: function (data) { 
        var datas = data['data']
        var str = "";
        $.each(datas,function(index,element){
          str +='<div class="list">'+index+'<ul>';
          for(i in element){
            if (index=="红队") {
              index = 'red';
            }else if (index=="黄队") {
              index = 'ye';
            }else if (index=="蓝队") {
              index = 'blue';
            }
            str += "<li><i class="+index+">"+element[i]+"</i></li>";  
          }
          str += '</ul></div>';
        })
        $(".tabcon .con").html(str);   
  },  
  error: function () {  
      showTip("查询失败")  
  }  

});

Json：

//type=tab1的时候
{
    "state": 1,
    "message": "ok",
    "data": {
        "红队": [
            "1",
            "2",
            "7"
        ],
        "蓝队": [
            "3",
            "4",
            "8",
            "9"
        ],
        "绿队": [
            "5",
            "6",
            "10"
        ]
    }
}

//type=tab2的时候
{
    "state": 1,
    "message": "ok",
    "data": {
        "男生": [
            "1",
            "2",
            "5",
            "8",
            "10"
        ],
        "女生": [
            "3",
            "4",
            "6",
            "7",
            "9"
        ]
    }
}

研究了好久实在是解决不了了来这边问问，以前没接触过ajax，对着这些处理很不清楚，最近才开始学的，很多不懂，希望大佬们指点一下。

Answer 1

从第一次得到的 JSON 生成一个从队号到颜色的映射表，第二次获得数据之后查表就好。

ES6 语法，Array.prototype.reduce(非 ES6) 实现
可以尝试自己改成 for 或者 forEach 循环

const data = {
    "红队": ["1", "2", "7"],
    "蓝队": ["3", "4", "8", "9"],
    "绿队": ["5", "6", "10"]
};

// 产生一个队名到颜色 class 的映射表
const colorClassMap = {
    "红队": "red",
    "绿队": "green",
    "黄队": "yellow",
    "蓝队": "blue"
};

// 两层 reduce 生成队号到颜色 class 的对应表
// 外层 reduce 处理每个队（添加一组映射）
// 内层 reduce 添加每个队号与颜色 class 映射关系
const classMap = Object.keys(data)
    .reduce((map, key) => {
        var team = data[key];
        return team.reduce((map, num) => {
            map[num] = colorClassMap[key];
            return map;
        }, map);
    }, {});

console.log(classMap);

如果深入思考，可以在每次获取数据之后完善这个映射表，生成一个从队号到队属性的映射表（key-value 数据库的表结构）

再深入一点，其实从后台就可以一次性返回一个队号-属性的JSON，这个 JSON 取到之后缓存在前端，每个 Tab 都可以使用……

Answer 2

你这个返回的数据格式就不对，虽然前端可以解决，但是很麻烦
返回类似如下数据，前端处理会简单很多

data: {
    items:[
        {
        id:1,
        sex:男生
        cate: 红队
        }，
        {
        id:2,
        sex:女生
        cate: 黄队
        }，
        {
        id:3,
        sex:女生
        cate: 蓝队
        }，
        .......
    ]
}

Answer 3

颜色要一样的话，判断要改一下，用key值判断了，就不要用固定字符判断

  var datas = data['data'];
        var str = "";
        var keys = Object.keys(data['data']);
        $.each(datas,function(index,element){
            str +='<div class="list">'+index+'<ul>';
            for(i in element){
              if (index==keys[0]) {
                index = 'red';
              }else if (index==keys[1]) {
                index = 'ye';
              }else if (index==keys[2]) {
                index = 'blue';
              }
              str += "<li><i class="+index+">"+element[i]+"</i></li>";  
            }
            str += '</ul></div>';
          })