JS动态输出JSON数据

        现需将不同内容，类似结构的JSON数据动态输出到页面之上，特此记录。

---

1.数据原型及效果设计

        测试数据包括最多三层JSON结构，拟采用“-”作为标识数据深度的标识符。

数据详情

-案号：11111111
-监狱案件编号：0000001
-罪犯姓名：张三
-罪犯编号：89457
-检察机关名称：XXX检察院
-出庭人员信息：
---序号：1
-----姓名：王五
-----职责：无
-----时间戳：2010-10-29 15:04:03
---序号：2
-----姓名：李四
-----职责：无
-----时间戳：2010-10-29 15:04:05
-减刑、假释案件出庭意见书哈希：
---哈希值：OxBDDE23123DNQWEQ9312312
---文件地址：127.0.0.1/fileaddress/xxx


数据内容

{
	"uniq_acceptid":"11111111",
    "prison_caseid":"0000001",
    "criminal_name":"张三",
    "criminal_no":"89457",
	"procuratorate":"XXX检察院",
	"incourt_persons":[
		{"no":"1","name":"王五","duty":"无","timestamp":"2010-10-29 15:04:03"},
		{"no":"2","name":"李四","duty":"无","timestamp":"2010-10-29 15:04:05"},
	],
	"incourt_opinion": {
		"hash":"OxBDDE23123DNQWEQ9312312…",
		"address":"127.0.0.1/fileaddress/xxx"
	}

}

2.创建对应数据字典文件

        使用字典来对应翻译英文字段。

/**
 * 数据字典对应
 */
export const DICTS = {

    //检察院反馈出庭人员信息
    uniq_acceptid: '案号',
    prison_caseid: '监狱案件编号',
    criminal_name: '罪犯姓名',
    criminal_no: '罪犯编号',
    procuratorate: '检查机关名称',
    incourt_persons: '出庭人员信息',
    incourt_opinion: '减刑、假释案件出庭意见书哈希',
    address: '文件地址',
    hash: '哈希值',
    no: '序号',
    name: '姓名',
    duty: '职责',
    timestamp: '时间戳',
    //其它字典项待补充 todo
};

3.动态输出JSON数据方法

//处理数据转换
    handleDataConvert = () =>{
        let dataDetailList = [];
        for(let item in data){
            if(typeof data[item] == 'string'){
                dataDetailList.push('-'+dicts[item]+':'+data[item])
            }else {
                dataDetailList.push('-'+dicts[item]+':')
                for(let citem in data[item]){
                    if(citem.length > 1){
                        dataDetailList.push('---'+dicts[citem]+':'+data[item][citem])
                    }else {

                        for(let ccitem in data[item][citem]){
                            if(ccitem.length > 1){
                                dataDetailList.push('-----'+dicts[ccitem]+':'+data[item][citem][ccitem])
                            }
                        }
                    }
                }
            }
        }
        this.setState({
            dataDetailList:dataDetailList
        })
    }

4.页面渲染

<List>
    {this.state.dataDetailList.map(x => (
        <ListItem style={{height:'auto', width:'inherit', display:'block', }}>
            {x}
        </ListItem>
    ))}
</List>

5.实测