How to return json formated array data from jquery to html

Question

Example of fetching data from 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;
    });     
});

I appreciate your help, I know this are the basics but right now my brain doesn't work as it should :\

You are inserting a JSON object in your page, which is why you get this result. You can convert it to a string by using $('html').text(JSON.stringify(person));, but I doubt that's what you want. You could do $('html').text('Name: '+name/*...*/). — blex
– blex, Commented Mar 4, 2015 at 22:44
Thank you blex! That's exactly what I wanted :) Now my PHP script can parse that and save it to db ;) Thank you!!! — Theresa O'Brian
– Theresa O'Brian, Commented Mar 4, 2015 at 22:47

xiix · Accepted Answer · 2015-03-05 01:48:53Z

I, too, would recommend some sort of templating system like underscores, handlebars, mustasche etc. However, if it's limited use you could do it yourself, instead of using an entire framework for one template.

You need some placeholders in your HTML. In the example, i use Mustasche.js-style placeholders. Example:

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

Then we want to replace the placeholder with the appropriate value, which could be done like this:

...
$.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;
});
...

posit labs · Accepted Answer · 2015-03-05 00:11:32Z

0

I recommend using a template function like _.template()

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

http://underscorejs.org/#template

answered Mar 5, 2015 at 0:11

posit labs

9,5114 gold badges42 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to return json formated array data from jquery to html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related