json数据映射填充到html元素显示

摘要:
映射算法已得到改进,以支持名称重复映射˂!=)域对象。innerHTML=值;}parseJson2Html;渲染:基本上包括所有表单元素。

映射算法做了改进,支持name重复映射

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript test</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <h3>script running ... ...</h3>
    <form id="data">
      <input type="text" name="name" value="">
      <input type="text" name="list[0].index" value="">
      <input type="text" name="list[1].no" value="">
      <select name="dept" width="40">
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
      </select><br><br>

      <textarea name="desc" rows="2" cols="70"></textarea><br><br>

      <input type="radio" name="sex" value="0"><input type="radio" name="sex" value="1">女 |
      <input type="checkbox" name="favor" value="book">book
      <input type="checkbox" name="favor" value="food">food
    </form>
    <button type="button" id="button">ajax</button>
</body>
<script type="text/javascript">
  var json = {name:'tom',age: 20,dept: 2,sex: 1,favor: 'book,food',desc: 'descript...',
              list:[{index:1,no:'0015'},{index:2,no:'0016'}]};

   /**
    * json数据映射到html
    * @param obj: json数据
    * @param type: 映射类型(text:值映射为innerHTML;其他:值映射为value)
    * @param path: 根路径,name属性的映射前缀
    **/
    function parseJson2Html(obj,type,path){
        var props = {};
        for (var key in obj) {
            var propPath = path;
            if (path) propPath = path + '.' + key;
            else propPath = key;

            if(typeof obj[key] === 'object') arguments.callee(obj[key], type, propPath);
            else {
                 propPath = propPath.replace(/.(d+)./g, '[+$1+].').replace(/[+]/g,'');
                 props[propPath] = obj[key];
            }
        }
        /* 数据映射到 html */
        for (var key in props) {
            var doms = document.querySelectorAll("[name='"+key+"']");
            if(doms.length==0) continue;
            for(var domIndex in doms) setValue(doms[domIndex],props[key]);
        }
        function setValue(domObj,value){
            if(domObj.type == 'radio' || domObj.type == 'checkbox'){// 扩展radio、checkbox
                 if(domObj.type == 'radio'){
                      if(domObj.value == value) domObj.setAttribute('checked',true);
                 }else{
                      let checkboxs = value.split(',');
                      if(checkboxs.indexOf(domObj.value)>=0) domObj.setAttribute('checked',true);
                 }
            }else if((domObj.value+'') != (value+'') && type != 'text') domObj.value = value;
            else if(domObj.innerText != (value+'') ) domObj.innerHTML = value;
       }
   }

   parseJson2Html(json);
</script>
</html>

效果图:

json数据映射填充到html元素显示第1张

表单元素基本都包含了。

附:由于项目中用到了easyui作为框架,故扩展了对easyui支持的版本

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript test</title>
    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
    <h3>script running ... ...</h3>
    <form id="data">
      <input type="text" name="name" value="">
      <input type="text" class="easyui-textbox" name="list[0].index" value="">
      <input type="text" name="list[1].no" value="">
      <select name="dept" class="easyui-combobox" data-options=" 40">
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
      </select><br><br>

      <textarea name="desc" rows="2" cols="70"></textarea><br><br>

      <input type="radio" name="sex" value="0"><input type="radio" name="sex" value="1">女 |
      <input type="checkbox" name="favor" value="book">book
      <input type="checkbox" name="favor" value="food">food
    </form>
    <button type="button" id="button">ajax</button>
</body>
<script type="text/javascript">
  var json = {name:'tom',age: 20,dept: 2,sex: 1,favor: 'book,food',desc: 'descript...',
              list:[{index:1,no:'0015'},{index:2,no:'0016'}]};

   /**
    * json数据映射到html
    * @param obj: json数据
    * @param type: 映射类型(text:值映射为innerHTML;其他:值映射为value)
    * @param path: 根路径,name属性的映射前缀
    **/
    function parseJson2Html(obj,type,path){
         var props = {};
         for (var key in obj) {
              var propPath = path;
              if (path) propPath = path + '.' + key;
              else propPath = key;

              if(typeof obj[key] === 'object') arguments.callee(obj[key], type, propPath);
              else {
                   propPath = propPath.replace(/.(d+)./g, '[+$1+].').replace(/[+]/g,'');
                   props[propPath] = obj[key];
              }
         }
         /* 数据映射到 html */
         for (var key in props) {
              var doms = document.querySelectorAll("[name='"+key+"']");
              if(doms.length==0) continue;
              for(var domIndex in doms) setValue(doms[domIndex],props[key]);
         }
        function setValue(domObj,value){
          if(domObj.type == 'radio' || domObj.type == 'checkbox'){// 扩展radio、checkbox
              if(domObj.type == 'radio'){
                  if(domObj.value == value) domObj.setAttribute('checked',true);
                 }else{
                    let checkboxs = value.split(',');
                    if(checkboxs.indexOf(domObj.value)>=0) domObj.setAttribute('checked',true);
                 }
            }else if((domObj.value+'') != (value+'') && type != 'text') domObj.value = value;
            else if(domObj.innerText != (value+'') ) domObj.innerHTML = value;
            // 支持easyui组件赋值
            parseEasyUI(domObj,value)
       }
       function parseEasyUI(obj,value){// 扩展对easyui组件的支持
        var dClass = obj.className;

        if(dClass && dClass.includes('-value') && obj.type == 'hidden'){       var ctn = $(obj).parent().prev(), classArr = ctn.prop('class').split(' ');       $.each(classArr,function(index,item){       if(item.includes('easyui-')) ctn[item.replace('easyui-','')]('setValue',value);       });
        }    } } parseJson2Html(json);
</script> </html>

免责声明:文章转载自《json数据映射填充到html元素显示》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇K8S从入门到放弃系列-(14)Kubernetes集群Dashboard部署汇编语言学习 基础知识下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

html 通过input video canvas 打开摄像头 定制相机

在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来。页面布局很简单,就是一个input标签,两个HTML5元素video、canvas和一个button按钮。video元素带有开启视频功能的函数,canvas元素带有捕捉图像功能的函数。 源代码如下: <!doctype html><h...

微信小程序之自定义模态弹窗(带动画)实例

一、前期准备工作 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1、基本需求。 实现用户自定义弹框 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容,自定义事件获取 二、程序实现具体步骤 1.弹框index...

Nginx使用Lua脚本加解密RSA字符串

本文主要介绍使用Lua脚本对采用RSA加密后的字符串进行解密的过程。 使用第三方类库lua-resty-rsa,参考地址:https://github.com/spacewander/lua-resty-rsa 下载并安装第三方依赖库 # Redis集群连接库依赖RSA加解密第三方依赖库[lua-resty-rsa],因此需要提前安装此第三方依赖库 #...

【基于python实现UI自动化】3.0 selenium

此文转载自:https://blog.csdn.net/lht3347/article/details/108630023#commentBox python-UI自动化之selenium元素定位 1.0 selenium工具介绍 2.0 selenium环境搭建 3.0 selenium元素定位 selenium常见8大元素定位 通过ID定位...

找到集合 P 中的所有 ”最大“ 点的集合

题目描述 P为给定的二维平面整数点集。定义 P 中某点x,如果x满足 P 中任意点都不在 x 的右上方区域内(横纵坐标都大于x),则称其为“最大的”。求出所有“最大的”点的集合。(所有点的横坐标和纵坐标都不重复, 坐标轴范围在[0, 1e9) 内) 如下图:实心点为满足条件的点的集合。请实现代码找到集合 P 中的所有 ”最大“ 点的集合并输出。 例子:...

nodejs+redis应用

1.什么是Redis Redis是一个基于BSD开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API. 1.Redis存储的是一个个的键值对 2.通常用Redis做缓存数据库 3.Redis的五种数据类型(字符串,哈希,链表,无序集合,有序集合) 2.Redis安装 Redis官方不支持w...