数据处理（接口返回数据两条为一组）

dongsdh
已于 2022-12-29 09:50:36 修改
阅读量295
点赞数
分类专栏：数据大屏微码文章标签： css 前端 javascript
于 2022-12-27 17:07:27 首次发布
本文链接：https://blog.csdn.net/dongsdh/article/details/128458571
版权
微码同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
数据大屏
2 篇文章 0 订阅
订阅专栏
数据处理，findIndex的应用，filter的应用，find的应用，reduce的应用
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .listbox {
      border: 1px solid red;
    }

    .listbox>div {
      min-height: 30px;
      background: #f5f5f5;
      margin-top: 10px;
    }

    .listbox .listitem span {
      display: inline-block;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <select name="city" id="" class="select"></select>
  <div class="listbox">
    <div>
      <div class="title">中心城区</div>
      <div class="listitem list1"></div>
    </div>
    <div>
      <div class="title">副中心</div>
      <div class="listitem list1"></div>
    </div>
    <div>
      <div class="title">平原新城</div>
      <div class="listitem list1"></div>
    </div>
    <div>
      <div class="title">生态涵养区</div>
      <div class="listitem list1"></div>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    var data = [
      {
        "name": "地区生产总值",
        "V": "568.7",
        "area": "通州区",
        "areaCode": "110112"
      },
      {
        "name": "同比增减",
        "V": "4.1",
        "area": "通州区",
        "areaCode": "110112"
      },
      {
        "name": "地区生产总值",
        "V": "206.7",
        "area": "怀柔区",
        "areaCode": "110116"
      },
      {
        "name": "同比增减",
        "V": "4.1",
        "area": "怀柔区",
        "areaCode": "110116"
      },
      {
        "name": "地区生产总值",
        "V": "4970.2",
        "area": "海淀区",
        "areaCode": "110108"
      },
      {

        "name": "同比增减",
        "V": "3.6",
        "area": "海淀区",
        "areaCode": "110108"
      },
      {
        "name": "地区生产总值",
        "V": "123.5",
        "area": "门头沟区",
        "areaCode": "110109"
      },
      {
        "name": "同比增减",
        "V": "1.2",
        "area": "门头沟区",
        "areaCode": "110109"
      },
      {
        "name": "地区生产总值",
        "V": "3623.8",
        "area": "朝阳区",
        "areaCode": "110105"
      },
      {
        "name": "同比增减",
        "V": "0.4",
        "area": "朝阳区",
        "areaCode": "110105"
      },
      {
        "name": "地区生产总值",
        "V": "1603.4",
        "area": "东城区",
        "areaCode": "110101"
      },
      {
        "name": "同比增减",
        "V": "6.8",
        "area": "东城区",
        "areaCode": "110101"
      },
      {
        "name": "地区生产总值",
        "V": "369.6",
        "area": "房山区",
        "areaCode": "110111"
      },
      {
        "name": "同比增减",
        "V": "2.9",
        "area": "房山区",
        "areaCode": "110111"
      },
      {
        "name": "地区生产总值",
        "V": "96.4",
        "area": "延庆区",
        "areaCode": "110119"
      },
      {
        "name": "同比增减",
        "V": "2.9",
        "area": "延庆区",
        "areaCode": "110119"
      },
      {
        "name": "地区生产总值",
        "V": "983",
        "area": "顺义区",
        "areaCode": "110113"
      },
      {
        "name": "同比增减",
        "V": "0.2",
        "area": "顺义区",
        "areaCode": "110113"
      },
      {
        "name": "地区生产总值",
        "V": "180.3",
        "area": "平谷区",
        "areaCode": "110117"
      },
      {
        "name": "同比增减",
        "V": "9.2",
        "area": "平谷区",
        "areaCode": "110117"
      },
      {
        "name": "地区生产总值",
        "V": "489.5",
        "area": "大兴区",
        "areaCode": "110115"
      },
      {
        "name": "同比增减",
        "V": "-25",
        "area": "大兴区",
        "areaCode": "110115"
      },
      {
        "name": "地区生产总值",
        "V": "1122",
        "area": "北京经济技术开发区",
        "areaCode": "110160"
      },
      {
        "name": "同比增减",
        "V": "-10.8",
        "area": "北京经济技术开发区",
        "areaCode": "110160"
      },
      {
        "name": "地区生产总值",
        "V": "165",
        "area": "密云区",
        "areaCode": "110118"
      },
      {
        "name": "同比增减",
        "V": "0.4",
        "area": "密云区",
        "areaCode": "110118"
      },
      {
        "name": "地区生产总值",
        "V": "585.4",
        "area": "昌平区",
        "areaCode": "110114"
      },
      {
        "name": "同比增减",
        "V": "0.8",
        "area": "昌平区",
        "areaCode": "110114"
      },
      {
        "name": "地区生产总值",
        "V": "941.1",
        "area": "丰台区",
        "areaCode": "110106"
      },
      {
        "name": "同比增减",
        "V": "0.5",
        "area": "丰台区",
        "areaCode": "110106"
      },
      {
        "name": "地区生产总值",
        "V": "445.1",
        "V_21_00": "445.1",
        "area": "石景山区",
        "areaCode": "110107"
      },
      {
        "name": "同比增减",
        "V": "1.4",
        "area": "石景山区",
        "areaCode": "110107"
      },
      {
        "name": "地区生产总值",
        "V": "2556.6",
        "area": "西城区",
        "areaCode": "110102"
      },
      {
        "name": "同比增减",
        "V": "3.9",
        "area": "西城区",
        "areaCode": "110102"
      }
    ]
    console.log('需求：接口返回的数据两条数据为一组，整理数据后显示')
    var area = '房山区'
    var listall = []
    var list1 = [
      {
        name: '朝阳区',
      },
      {
        name: '丰台区',
      },
      {
        name: '石景山区',
      },
      {
        name: '海淀区',
      },
      {
        name: '东城区',
      },
      {
        name: '西城区',
      }
    ]
    var list2 = [
      {
        name: '通州区',
      }
    ]
    var list3 = [
      {
        name: '房山区',
      },
      {
        name: '顺义区',
      },
      {
        name: '昌平区',
      },
      {
        name: '大兴区',
      },
      {
        name: '经开区',
      }
    ]
    var list4 = [
      {
        name: '门头沟区',
      },
      {
        name: '怀柔区',
      },
      {
        name: '平谷区',
      },
      {
        name: '密云区',
      },
      {
        name: '延庆区',
      }
    ]

    let arr1 = []
    let arr2 = []
    let arr3 = []
    let arr4 = []
    let citytotal = 0;
    var newData = []
    let Ndata = data.map(item => {
      if (item.area == '北京经济技术开发区') {
        item.area = '经开区'
      }
      return item
    })
    console.log('1、得到整理后的新数据', Ndata)
    while (Ndata && Ndata.length > 0) {
      var it = Ndata.slice(0, 2)
      newData.push(it)
      Ndata = Ndata.slice(2)
    }
    console.log('2、两条数据为一组得到整理后的新数据', newData)
    citytotal = newData.reduce((prev, next) => {
      return prev + Number(next[0].V);
    }, 0);

    newData.forEach(item => {
      listall.push({
        name: item[0].area,
        outputValue: item[0].V,
        zs: item[1].V,
        zqs: item[0].V / citytotal * 100
      })
      list1.forEach(d => {
        if (item[0].area == d.name) {
          arr1.push({
            name: d.name,
            outputValue: item[0].V,
            zs: item[1].V,
            zqs: item[0].V / citytotal * 100
          })
        }
      })
      list2.forEach(d => {
        if (item[0].area == d.name) {
          arr2.push({
            name: d.name,
            outputValue: item[0].V,
            zs: item[1].V
          })
        }
      })
      list3.forEach(d => {
        if (item[0].area == d.name) {
          arr3.push({
            name: d.name,
            outputValue: item[0].V,
            zs: item[1].V
          })
        }
      })
      list4.forEach(d => {
        if (item[0].area == d.name) {
          arr4.push({
            name: d.name,
            outputValue: item[0].V,
            zs: item[1].V
          })
        }
      })
    });
    console.log('3、和list1、list2、list3、list4匹配后得到新数据')
    arr1.sort((a, b) => b.outputValue - a.outputValue)
    arr2.sort((a, b) => b.outputValue - a.outputValue)
    arr3.sort((a, b) => b.outputValue - a.outputValue)
    arr4.sort((a, b) => b.outputValue - a.outputValue)
    console.log('4、从大到小排序后得到新数据')
    let shtml = ''
    for (let i = 0; i < arr1.length; i++) {
      shtml += `<div><span>${arr1[i].name}</span> <span>${arr1[i].outputValue}亿元</span> <span>${arr1[i].zs}%</span></div>`
    }
    $('.list1').html(shtml)
    let shtml2 = ''
    for (let i = 0; i < arr2.length; i++) {
      shtml2 += `<div><span>${arr2[i].name}</span> <span>${arr2[i].outputValue}亿元</span> <span>${arr2[i].zs}%</span></div>`
    }
    $('.list2').html(shtml2)
    let shtml3 = ''
    for (let i = 0; i < arr3.length; i++) {
      shtml3 += `<div><span>${arr3[i].name}</span> <span>${arr3[i].outputValue}亿元</span> <span>${arr3[i].zs}%</span></div>`
    }
    $('.list3').html(shtml3)
    let shtml4 = ''
    for (let i = 0; i < arr4.length; i++) {
      shtml4 += `<div><span>${arr4[i].name}</span> <span>${arr4[i].outputValue}亿元</span> <span>${arr4[i].zs}%</span></div>`
    }
    $('.list4').html(shtml4)

    listall.sort((a, b) => b.outputValue - a.outputValue)

    let selHtml = ''
    for (let i = 0; i < listall.length; i++) {
      selHtml += `<option value="${listall[i].name}">${listall[i].name}</option>`
    }
    $('.select').html(selHtml)
    $('select[name=city]').val(area);
    $("select[name='city']").change(function () {
      area = $(this).val()
      init()
    });
    function init() {
      let curitem = listall.filter(item => item.name == area);
      let ind = listall.findIndex(item => item.name == area);
      console.log('5、得到数据，占全市' + curitem[0].zqs.toFixed(2) + '排名' + (ind + 1))
      $('.box1').text('占全市' + curitem[0].zqs.toFixed(2) + ' 排名' + (ind + 1))
      let arr1Totle1 = 0
      let arr1Totle2 = 0
      let arr1Totle3 = 0
      let arr1Totle4 = 0
      arr1Totle1 = arr1.reduce((prev, next) => {
        return prev + Number(next.outputValue);
      }, 0);
      arr1Totle2 = arr2.reduce((prev, next) => {
        return prev + Number(next.outputValue);
      }, 0);
      arr1Totle3 = arr3.reduce((prev, next) => {
        return prev + Number(next.outputValue);
      }, 0);
      arr1Totle4 = arr4.reduce((prev, next) => {
        return prev + Number(next.outputValue);
      }, 0);
      let zqqNum = 0
      let zqqpm = 0
      arr1.forEach(item => {
        if (item.name == area) {
          zqqNum = item.outputValue / arr1Totle1 * 100
          zqqpm = arr1.findIndex(item => item.name == area);
        }
      })
      arr2.forEach(item => {
        if (item.name == area) {
          zqqNum = item.outputValue / arr1Totle2 * 100
          zqqpm = arr2.findIndex(item => item.name == area);
        }
      })
      arr3.forEach(item => {
        if (item.name == area) {
          zqqNum = item.outputValue / arr1Totle3 * 100
          zqqpm = arr3.findIndex(item => item.name == area);
        }
      })
      arr4.forEach(item => {
        if (item.name == area) {
          zqqNum = item.outputValue / arr1Totle4 * 100
          zqqpm = arr4.findIndex(item => item.name == area);
        }
      })



      let txt = ''
      if (arr1.find(item => item.name == area)) txt = '中心城区'
      if (arr2.find(item => item.name == area)) txt = '副中心'
      if (arr3.find(item => item.name == area)) txt = '平原新城'
      if (arr4.find(item => item.name == area)) txt = '生态涵养区'

      console.log('6、得到数据，占' + txt + zqqNum.toFixed(2) + '排名' + (zqqpm + 1))
      $('.box2').text('占' + txt + zqqNum.toFixed(2) + '排名' + (zqqpm + 1))
    }

    init()
  </script>
</body>

</html>