recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - js 操作 json

<head>
<script type="text/javascript" >
function showJSON() {    
    var user =     
    {     
        "username":"andy",    
        "age":20,    
        "info": { "tel": "123456", "cellphone": "98765"},    
        "address":    
            [    
                {"city":"beijing","postcode":"222333"},    
                {"city":"newyork","postcode":"555666"}    
            ]    
    }    
        
    alert(user.username);    
    alert(user.age);    
    alert(user.info.cellphone);    
    alert(user.address[0].city);    
    alert(user.address[0].postcode);    
}   
</script>
</head>
<body>

</body>
</html> 

如何在页面显示

alert(user.username);    
alert(user.age);    
alert(user.info.cellphone);    
alert(user.address[0].city);    
alert(user.address[0].postcode);  

这些要显示的属性 在body里面要怎么写?

天蓬老师天蓬老师2894 Il y a quelques jours678

répondre à tous(4)je répondrai

  • 阿神

    阿神2017-04-10 12:45:59

    除了@felix021 的回答外,还有其他的实现方式。
    如果需要将大量的JSON数据渲染到页面中,可以考虑Javascript模版渲染引擎,下面介绍两种不同的模版渲染引擎。

    前端渲染

    直接在前端渲染HTML模版。此类模版引擎有

    • baiduTemplate https://github.com/wangxiao/BaiduTemp...
    • jade https://github.com/visionmedia/jade
    • ejs https://code.google.com/p/embeddedjav...

    等等。
    通过定义HTML模版

    <!-- templates/supplies.ejs -->
    
    <h1>Supplies</h1>
    <ul>
    <% for(var i=0; i<supplies.length; i++) {%>
       <li><%= supplies[i] %></li>
    <% } %>
    </ul>

    然后使用获得的JSON数据,渲染模版

    var my_supplies = {supplies: ['mop', 'broom', 'duster']};
    var result = new EJS({url: 'templates/supplies.ejs'}).render(my_supplies);

    最后将模版回填到网页中

    document.getElementById('supply_list').innerHTML = result

    使用模版渲染的优点是避免了大量冗余重复的用于设置HTML文本的JS代码。

    后端编译

    在后端编译HTML模版为Javascript。如

    • closure-template https://developers.google.com/closure...

    closure-template通过定义HTML模版,接着在后台预先编译为Javascript函数的方式,实现模版渲染。和前端渲染相比,缺点显而易见,需要编译增加了修改的成本;而优点是,使用前端渲染的方式产生了大量HTML模版碎片,即使有些模版是相关联的。而使用closure-template可将相关模版编译为一个js文件,对于大型项目来说易于控制。

    我这里只是简单介绍不同的模版渲染方案。详细信息请参考以上项目的文档。

    répondre
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 12:45:59

    如果只是要简单地写在页面上,用document.write。

    如果要放在一个p里面,例如

    <p id="content"></p>

    那么

     document.getElementById('content').innerHTML = 'xxx'; 

    répondre
    0
  • 黄舟

    黄舟2017-04-10 12:45:59

    说起模板引擎,最近感觉最好用的是Jade,语法实在太简洁了。确实让人爱不释手。

    在Stackoverflow上面看到一个问题
    Client side + Server side templating, feels wrong to me, how to optimize?
    对于客户端,服务端同时使用Jade模板引擎怎么优化呢?其实问题作者的原意是如何同时使用,而且能够让代码保持分离,同时易于维护。基于我对模板引擎的理解,以及以往的使用经验,其实这个问题并不难,于是我回答了一下,简单地做了一个英文的教程。搜索以下国内的文章,似乎没有一些简单的教程,可能会对好像我这样的菜鸟造成学习上的困扰,于是就把答案转译成中文。分享以下,也欢迎大家同时提供更好的编码经验,分享一下。

    毫无疑问,Jade是一个非常不错的模板引擎,尽管它也有一些Bug,不过你提issue,应该很快就会被解决掉的。而且它的语法基于HAML,甚至更优,提高效率的东西因此值得我们去尝试使用。

    在阅读本文之前,我假定你已经使用过其他的模板引擎,或者已经会使用Server端的模板引擎。如果不懂的话,要折腾一下,应该很容易理解的。那么在把Server端和Client端的Jade结合前,我们先尝试把单纯客户端的Jade模板渲染,做一遍。

    首先我们要下载Jade到本地

    git clone https://github.com/visionmedia/jade.git

    接着我们需要

    $ make jade.js

    事实上,jade的项目下,已经有这两个文件了:jade.js 或者 jade.min.js。这个时候,我们只是需要把这两个文件放到我们喜欢的路径上,然后让浏览器加载他。

    第三步,看看我的demo,我加载了jade以及jquery,而且你还看到我加载了一段jade模板代码进来。其中item是一个变量,我们就利用jade模板引擎的api使用方式,逐步地把这个模板渲染出啦。

    代码中已经把基本的html元素去掉了,因此自行加上 :

    <script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script>
    <script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script>
    <script type='template' id='test'>
    ul
      li hello world 
      li #{item}
      li #{item}
      li #{item}
      //这个是jade的模板引擎代码 我们将会渲染三个item变量出来,值都是 "this is an item"
    </script>
    <script>
      var compileText = $("#test").text();//获取我们要编译的模板文本,数据类型是string,注意缩进
      console.log( typeof( compileText ) );
      var fn = jade.compile( compileText , { layout : false } );//利用jade编译模板文本
      var out = fn( { item : "this is an item " } );//编译好之后,我们执行该函数,把我们要传的变量,渲染的数据传入
      console.log( out );//最后输出最终编译的结果
      $("body").append( out );//利用javascript渲染到前端页面上
    </sc``ript>

    最终看到的结果是

    hello world
    this is item
    this is item
    this is item

    就是上面简单的几个步骤就可以把我们需要渲染的东西渲染出来了。很简单吧。那么疑问就来了,要是我们服务端要使用jade,客户端也是使用jade,岂不是有语法冲突?(试想一下,服务端使用jade,在服务端就把模板渲染好了,客户端上面拿到的是已经编译好的代码)

    这个时候我们就必须要解决冲突的问题。还好。jade早就提供了这套解决方案了。这里要记住,服务端有服务端的渲染,客户端有客户端的渲染。下面来看看例子:
    index.jade

    !!!5
    html
      head
       title hello world
      body
        ul#list
    
        script#list-template(type='template')
          |- for( var i in data )
          |    li(class='list') \#{ data[i].name }
          |- }

    很明显,上面是服务端需要渲染的jade文件,代码应该很容易看懂了。和上面的例子一样,我们在上面要渲染的模板是id 为 list-template里面的内容。不过写法似乎有点不一样 :-)。首先缩进相同的情况下,在代码的左边都加上了 "|" 。

    加上"|"的原因是,为了避免和server端的jade模板代码造成混淆,不然可能会报错,或者无法正常去到客户端渲染。

    其次,你会看到在#{ data[i].name }的前面,加上了"\"符号,实质上同样是为了转义,不被污染。

    下面再看javascript的代码

    index.js

    /* you javascript code */
    var compileText = $('#list-template').text();
    var compile = jade.compile( compileText , { layout : false } );
    
    var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }];
    var outputText = compile( data );
    $("#list").append( outputText );

    这下很容易理解了吧。最后输出的结果就是

    Ben
    Jack
    Rose

    小提示:其实在调试的时候有jade语法错误提示,但是依然挺麻烦的。如果确实遇到jade模板服务端,客户端混淆的时候,不妨尝试一下先在纯html页面中,载入jade,写一些测试代码,然后让jade进行渲染。保证到需要编译的文本,是字符串,而且语法符合编译的要求。这样就没有问题了。

    其实本文并没有什么技术含量,仅仅是一个小教程以及解决一些小疑惑。jade的强大还远远不止这些呢。不过上面已经含括了挺多的功能啦,具体的语法还需要你亲自去探索。

    répondre
    0
  • 高洛峰

    高洛峰2017-04-10 12:45:59

    用JS 。。。。。。。。

    分割线

    répondre
    0
  • Annulerrépondre