小张收到一个需求 根据不同入参后端返回不同的JSON数组 类似这样的
let a = {
"studentId": {
"value": "zy1106169",
"desc": "学号"
},
"awards": {
"value": [
{
"institute": {
"value": {
"otherLeader": {
"valueItem": {
"gender": {
"desc": "性别"
},
"name": {
"desc": "姓名"
},
"age": {
"desc": "年龄"
}
},
"desc": "其他领导"
},
"level": {
"desc": "级别"
},
"title": {
"valueItem": {},
"desc": "头衔"
},
"masterLeader": {
"value": {
"gender": {
"desc": "性别"
},
"name": {
"desc": "姓名"
},
"age": {
"desc": "年龄"
}
},
"desc": "主要领导"
},
"instituteName": {
"desc": "机构名称"
}
},
"desc": "颁奖机构"
},
"awardDate": {
"value": "20131211",
"desc": "获奖日期(格式 yyyyMMdd)"
},
"awardName": {
"value": "ACM TOP",
"desc": "奖项名称"
}
},
{
"institute": {
"value": {
"otherLeader": {
"valueItem": {
"gender": {
"desc": "性别"
},
"name": {
"desc": "姓名"
},
"age": {
"desc": "年龄"
}
},
"desc": "其他领导"
},
"level": {
"desc": "级别"
},
"title": {
"valueItem": {},
"desc": "头衔"
},
"masterLeader": {
"value": {
"gender": {
"desc": "性别"
},
"name": {
"desc": "姓名"
},
"age": {
"desc": "年龄"
}
},
"desc": "主要领导"
},
"instituteName": {
"desc": "机构名称"
}
},
"desc": "颁奖机构"
},
"awardDate": {
"value": "20051211",
"desc": "获奖日期(格式 yyyyMMdd)"
},
"awardName": {
"value": "NOI TOP",
"desc": "奖项名称"
}
},
{
"institute": {
"value": {
"otherLeader": {
"valueItem": {
"gender": {
"desc": "性别"
},
"name": {
"desc": "姓名"
},
"age": {
"desc": "年龄"
}
},
"desc": "其他领导"
},
"level": {
"desc": "级别"
},
"title": {
"valueItem": {},
"desc": "头衔"
},
"masterLeader": {
"value": {
"gender": {
"desc": "性别"
},
"name": {
"desc": "姓名"
},
"age": {
"desc": "年龄"
}
},
"desc": "主要领导"
},
"instituteName": {
"desc": "机构名称"
}
},
"desc": "颁奖机构"
},
"awardDate": {
"value": "20061211",
"desc": "获奖日期(格式 yyyyMMdd)"
},
"awardName": {
"value": "IOI TOP",
"desc": "奖项名称"
}
}
],
"desc": "获奖列表"
},
"basicInfo": {
"value": {
"gender": {
"value": "male",
"desc": "性别"
},
"name": {
"value": "zjs",
"desc": "姓名"
},
"age": {
"value": "18",
"desc": "年龄"
}
},
"desc": "基本信息"
}
}
是不是很长?
只是想让大家看一下 层次有很多 desc是要显示的内容 有无value也很重要 最终都是字符串形式
OK 简化一下
'{"studentId":{"value":"zy1106169","desc":"学号"},"awards":{"value":[{"institute":{"value":
{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年
龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头
衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年
龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":
{"value":"20131211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"ACM TOP","desc":"奖
项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":
{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":
{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":
{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名
称"}},"desc":"颁奖机构"},"awardDate":{"value":"20051211","desc":"获奖日期(格式
yyyyMMdd)"},"awardName":{"value":"NOI TOP","desc":"奖项名称"}},{"institute":{"value":
{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":
"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头
衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"
年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":
{"value":"20061211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"IOI TOP","desc":"奖
项名称"}}],"desc":"获奖列表"},"basicInfo":{"value":{"gender":{"value":"male","desc":"性
别"},"name":{"value":"zjs","desc":"姓名"},"age":{"value":"18","desc":"年龄"}},"desc":"基本信
息"}}';
一开始 对于这种 写了一个方法
function draw(obj, layer) {
let desc = obj.desc;
let value = obj.value;
if(value == null) { // 空数组或空字符串的情况
let valueItem = obj.valueItem;
if(valueItem == null) { // 空字符串
console.log(genSpace(layer), desc);
} else if (JSON.stringify(valueItem) == "{}") { //空字符串数组
console.log(genSpace(layer), desc, "", "+");
} else { // 空数组
console.log(genSpace(layer), desc, "+");
for(let i in valueItem) {
draw(valueItem[i], layer + 1);
}
}
} else {
if(value == null || typeof(value) == "string") { // 字符串的情况
console.log(genSpace(layer), desc, value);
} else if(value instanceof Array) {
console.log(genSpace(layer), desc, "+");
for(let item of value) {
for(let i in item) {
draw(item[i], layer + 1);
}
}
} else if(typeof(value) == "object") { // 对象的情况
console.log(genSpace(layer), desc, ": ");
for(let i in value) {
draw(value[i], layer + 1);
}
}
}
}
/**
* 用来生成缩进格式用的
* @param layer
* @returns {string}
*/
function genSpace(layer) {
let space = "";
for(let i = 0; i < layer; i ++) {
space += " ";
}
return space;
}
let str = '{"studentId":{"value":"zy1106169","desc":"学号"},"awards":{"value":[{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20131211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"ACM TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20051211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"NOI TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20061211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"IOI TOP","desc":"奖项名称"}}],"desc":"获奖列表"},"basicInfo":{"value":{"gender":{"value":"male","desc":"性别"},"name":{"value":"zjs","desc":"姓名"},"age":{"value":"18","desc":"年龄"}},"desc":"基本信息"}}'
let obj = JSON.parse(str);
let wrap = {};
wrap.desc = "SUPER";
wrap.value = obj;
draw(wrap, 0);
需求是要有的判断条件输出的标签应该去包裹别的判断条件的标签 但是 这个方法 打印出来的都可以 也可以push到一个数组里 但是只有一层
最终的解决办法是
function draw(obj, arrayItem = false) {
let desc = obj.desc || 'Item';
let value = obj.value || obj.valueItem;
if (value === void 0 && arrayItem) {
value = obj
}
let type = getType(value);
let valueContent = '';
let descHtml = `<div class="desc">${desc}</div>`;
switch (type) {
case 'Array':
for (let i = 0; i < value.length; i++) {
valueContent += draw(value[i], true);
}
break;
case 'Object':
for (const key in value) {
if (value.hasOwnProperty(key)) {
valueContent += draw(value[key]);
}
}
break;
default:
valueContent = value || `<input/>`;
break;
}
let valueHtml = `<span class="${arrayItem ? 'item' : 'value'}" style={{ color: 'red' }}>${valueContent}</span>`;
return arrayItem ? valueHtml : `<div class="item">${descHtml}${valueHtml}</div>`
}
function getType(val) {
return Object.prototype.toString.call(val).slice(8, -1);
}
let str =
'{"studentId":{"value":"zy1106169","desc":"学号"},"awards":{"value":[{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20131211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"ACM TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20051211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"NOI TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20061211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"IOI TOP","desc":"奖项名称"}}],"desc":"获奖列表"},"basicInfo":{"value":{"gender":{"value":"male","desc":"性别"},"name":{"value":"zjs","desc":"姓名"},"age":{"value":"18","desc":"年龄"}},"desc":"基本信息"}}';
let obj = JSON.parse(str);
let wrap = {};
wrap.desc = 'SUPER';
wrap.value = obj;
// console.log(wrap)
const result = draw(wrap);
console.log(result)
但是! 但是! 因为是模板字符串 所以与antd一起使用会引起冲突
比如 这样<span class="${arrayItem ? 'item' : 'value'}" style={{ color: 'red' }}>${valueContent}</span>
是可以的
但是调用antd里的组件 模板字符串被浏览器解析时 antd的api会被转译(toString)
`<Form.Item>
{
${getFieldDecorator('username')(
<Input placeholder=""/>
)} //这里会被浏览器解析出[object object]的dom
}
</Form.Item>`
所以这个方法也相当于失败了