动态放入后台给的键值对显示出来,然后动态返回数据(难点:数据格式问题)
程序员文章站
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天,好像是吧,继续加油肝,程序猿没有下班,只有自愿加班。!!!
下一篇: 搞懂C语言函数指针