动态放入后台给的键值对显示出来,然后动态返回数据(难点:数据格式问题)

一、动态放入后台的值

将'应发'下的键数据${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天,好像是吧,继续加油肝,程序猿没有下班,只有自愿加班。!!!

posted @ 2019-01-05 16:36  梦里一米七八  阅读(852)  评论(1编辑  收藏  举报