如何将json格式的数组数据从jquery返回到html

时间:2015-03-04 22:38:24

标签: javascript jquery html json

从FB获取数据的示例...

$(document).ready(function(){
    var name;
    var link;
    var gender;
    var id;

    $.getJSON( "http://graph.facebook.com/4/", function( json ) {
        name = json.name;
        link = json.link;
        gender = json.gender;
        id = json.id;

        var person = {name:name,link:link,gender:gender,id:id};

        console.log(person); 
        // This gives me exactly what I need but only in console view.

        $('html').text(person); 
        // This just writes [object Object] inside my window

        return person;
    });     
});

我感谢你的帮助,我知道这是基础知识但是现在我的大脑并没有按照它应该的方式工作:\

2 个答案:

答案 0 :(得分:1)

我也会推荐某种模板系统,如下划线,把手,mustasche等。但是,如果它的使用有限,你可以自己做,而不是使用一个模板的整个框架。

您的HTML中需要一些占位符。在示例中,我使用Mustasche.js样式的占位符。例如:

        <html>
        <body>
            <ul>
                <li>name: {{name}}</li>
                <li>gender: {gender}</li>
                <li>link: {{link}}</li>
                <li>id: {{id}}</li>
            </ul>
        </body>
    </html>

然后我们想用适当的值替换占位符,这可以这样做:

...
$.getJSON( "http://graph.facebook.com/4/", function( json ) {
    name = json.name;
    link = json.link;
    gender = json.gender;
    id = json.id;

    var person = {name:name,link:link,gender:gender,id:id};


    // Get the current HTML from the selector
    var template = $("html").html();

    // Replace each placeholder w/ the correct thing
    template = template.replace("{{name}}", name);
    template = template.replace("{{link}}", link);
    template = template.replace("{{gender}}", gender);
    template = template.replace("{{id}}", id);

    // Write the new HTML to the selector
    $("html").html(template);

    return person;
});
...

答案 1 :(得分:0)

我建议使用_.template()

等模板功能
var compiled = _.template("<p>Name: <%= name %></p>");
compiled(person);
//<p>Name: Theresa</p>

http://underscorejs.org/#template