Create html from json fetched with ajax

Question

What I want to do:

I have an application based on symfony2 (php). A simple action returns data as json like this

    $headers = array(
        'Content-Type' => 'application/json'
    );

    return new Response($data, 200, $headers);

This action is called from javascript like this

function loadData(action){
    $.ajax({
        type: "POST",
        url: action,
        success: function(data){
            console.log(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

So this seems very basic so far. From the console I can see the correct data returned. This data should be placed somewhere on the project website.

Question:

Is there any straight forward way to create html from json within javascript? Actually I want seperate templates (twig) from the logic of the project. So would it be correct to generate the html e.g. in the success callback in the loadData method?

I could bypass this problem by returning html instead of json. But I think about building some kind of rest api for my project which I think required json for transport.

Any suggestions or ideas? Please share your ways of handling this.

Of course but where is your json. i mean a sample of your json response — Jai
– Jai, Commented Apr 2, 2013 at 8:29
Just a note but for a JSON response you can use Symfony\Component\HttpFoundation\JsonResponse->create() without the need to send your own headers or status stuff. — qooplmao
– qooplmao, Commented Apr 2, 2013 at 8:59
"I could bypass this problem by returning html instead of json. But I think about building some kind of rest api for my project which I think required json for transport." could you explain more about this? — ianace
– ianace, Commented Apr 2, 2013 at 9:29
You could do like Facebook does and return a pre generated HTML using $view = $this->renderView('Blah:Blah:some_content.html.twig, $vars) then return new JsonResponse(array('view' => $view)) and finally using jQuery to fill the space needed using return (data) {$('#blah').html(data.view);} but then it's not overly portable. — qooplmao
– qooplmao, Commented Apr 2, 2013 at 9:32

Community · Accepted Answer · 2017-05-23 10:30:05Z

2

You can use angular js. It have one good thing for symfony:

angular.module('myApp', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('[[').endSymbol(']]');
    };
);

It changes {{ with [[ and let you use template in TWIG.

This will help with json query in angular js.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Apr 2, 2013 at 8:43

Narek

3,8235 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarkLeafyGreen Over a year ago

Great thing. Gonna give it a try

Kirill · Accepted Answer · 2013-04-02 08:49:59Z

1

Get the data and send it back to the server ? I think its not correct.

Try to look at underscore.js ( _.template() ) for templating on client side with received json object.

And try to use TWIG like this:

_.templateSettings = {
  interpolate : /\[\[(.+?)\]\]/g
};

var template = _.template("Hello [[ name ]]!");
template({name : "Mustache"});
=> "Hello Mustache!"

edited Apr 2, 2013 at 8:49

answered Apr 2, 2013 at 8:38

Kirill

195 bronze badges

Comments

Jonas G. Drange · Accepted Answer · 2013-04-02 08:29:40Z

0

Take a look at Handlebars.

You can basically pass the JSON to a Handlebars template:

The template:

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </div>
</script>

The JS:

var source   = $("#entry-template").html(),
    template = Handlebars.compile(source),
    context = {title: "My New Post", body: "This is my first post!"},
    html    = template(context);

The result:

<div class="entry">
    <h1>My New Post</h1>
    <div class="body">
        This is my first post!
    </div>
</div>

answered Apr 2, 2013 at 8:29

Jonas G. Drange

8,8332 gold badges29 silver badges40 bronze badges

3 Comments

Narek Over a year ago

In twig used same syntax {{ so there will be problem with using it in templates. Is there any method to change {{ with [[ for example?

Narek Over a year ago

In this case you will not be able to use for example system vars in twig.

Jonas G. Drange Over a year ago

You can end the verbatim tag at any time.

Collectives™ on Stack Overflow

Create html from json fetched with ajax

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related