动态放入后台给的键值对显示出来，然后动态返回数据（难点：数据格式问题）

一、动态放入后台的值

将'应发'下的键数据${key}放入html中，记得使用转义字符  ``  ，这个符号实在键盘左上角的第二列第一个，来表示里面写的是html格式的代码。

然后 ${this.data.data['应发'][i][key]}是遍历每行的key对应的值，

然后再把html给放入你的html文件中，用prepend（）方法

 for (var i = 0; i < this.data.data['应发'].length; i++) {
            for (var key in  this.data.data['应发'][i]) {
                var money_html = `<div class="row"><label for="#"> ${key}</label> :<input name='yf' type="text" class="form-control" value="${this.data.data['应发'][i][key]}"></div>`;
                break;
            }
            $('#yf_money').prepend(money_html);
        }
        for (var i = 0; i < this.data.data['应扣'].length; i++) {
            for (var key in  this.data.data['应扣'][i]) {
                var money_html = ` <div class="row"><label for="#"> ${key}</label> :<input name="yk" type="text" class="form-control" value="${this.data.data['应扣'][i][key]}"></div>`;
                break;
            }
            $('#yk_money').prepend(money_html);
        }

二、然后动态返回数据

    大概返回的数据就是对象下放两个列表（前端叫做对象）{字典下几条列表（前端叫做数组）}，然后再放两个字符串。

下面是返回的大概格式。

'data':{
    'yf':[{'一':1},{'二':2},{'三':3}],
        'yk':[{'四':4},{'二':5},{'三':6}],
        'yy':'yy',
        'mm':'mm'
}

 

我的想法是这样的，由于我是前端小白啊，能力范围下我只能获取到字典下的列表中的key列表和value列表。

你也可以理解为获取对象中的数组中的key数组和value数组

获取input的name为yf的所有数据，获取value数组，用到each.(function(){   });的方法。

 $("input[name='yf']").each(function(){
       yf_value.push($(this).val());
    });
    $("input[name='yk']").each(function(){
        yk_value.push($(this).val());
    });
 

然后获取label下的key数组，这里遇到另一个问题，就是我获取的label值是整个HTML的label值，但我想要获取的key数组是从第4个开始算起的，而且长度每次也是有局限的，所以这里就利用到了上面的yf_value.length，来获取我需要的数据。

$('label').each(function(){
        b.push($(this).text());
    });
    yf_key= b.slice(4,yf_value.length+4);
    yk_key= b.slice(yf_value.length+4,yf_value.length+4+yk_value.length);

接下来，就是比较难受一点的将两个数组拼在一个对象里了，这里呢，一定要注意if条件里的

   ( i==j )

这个如果写错的话，各种数据格式都会出现，一开始我以为是var的问题，改成let之后发现也并没有什么卵用。还有就是，刚开始写的时候，我是把数据push进yf和yk数组的

yf.push(dict); 

yk.push(dict1);

其实好像和下面的写法也差不多，不过下面的会舒服一点

yf[i]=dict;

yk[i]=dict;

var yf=[];
var yk=[];
console.log(yk_key);
    for (var i=0;i<yf_key.length;i++){
                var dict={};
                for(var j=0;j<yf_value.length;j++){
                    if(i==j){
                        dict[yf_key[i]]=yf_value[i];
                        yf[i]=dict;
                }
                }
    }
    for (var i=0;i<yk_key.length;i++){
        var dict1={};
        for(var j=0;j<yk_value.length;j++){
            if(i==j){
                dict1[yk_key[i]]=yk_value[i];
                yk[i]=dict1;
            }
        }
    }

 

 

总结：这里主要用的思想呢，大概有下面这几个

1.获取多个input的值（用each()方法去遍历name），获取多个label的值(直接用each)，有人可能会问，用id啊，但是重点是他这个input是动态生成的啊！！，用id只能获取一个值，这里你需要获取多个Input，所以id已经gg了

2.还有就是label的获取，取第四个开始的数据，用到slice切片，

3.怎样获取后端动态返回的数据放入html页面显示，用到${}的方法，然后再用prepend方法加入到对应html的id下

4.然后就是将key列表和value列表组装成字典，用到两个for循环，然后判断i==j，再赋值即可。（将两个列表放入一个字典）。

前端实习第20天，好像是吧，继续加油肝，程序猿没有下班，只有自愿加班。！！！