欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-04 17:05:51
一、动态放入后台的值 将'应发'下的键数据${key}放入html中,记得使用转义字符 `` ,这个符号实在键盘左上角的第二列第一个,来表示里面写的是html格式的代码。 然后 ${this.data.data['应发'][i][key]}是遍历每行的key对应的值, 然后再把html给放入你的ht ......

一、动态放入后台的值

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