Returning HTML in JSON Format and Calling a Function

Question

I'm not even sure if this is possible or not, but I am trying to display an HTML page, formatted as JSON, and then call a function whenever the user clicks on a button inside of this returned HTML. I know this is weird, but this is the way the customer wants it. Can anyone tell me if this is even possible? And also, I already have the page displaying correctly. The only issue is actually executing a function when the user clicks a button on this page.

    {
    "responseHTML": "<script>console.log('TEST')</script><div><button onclick='test()'></button></div>"
    }

What do you mean by display an HTML page, formatted as JSON — user184994
– user184994, Commented May 22, 2018 at 21:19
It is definitely weird but possible. So what you can do is receive html as json and then append it to body element $('body').append(data.responseHTML); — Mohsin Mehmood
– Mohsin Mehmood, Commented May 22, 2018 at 21:21
@MohsinMehmood The script contents won't execute that way. A new script element must be created via the DOM and a text node created for it. — Scott Marcus
– Scott Marcus, Commented May 22, 2018 at 21:27
@ScottMarcus I think the goal is to render the html received as json. So if there is a method defined inside scripts tag it will be called on button click e.g <button onclick='test()'></button>. You are right about executing console.log statement inside scripts tag — Mohsin Mehmood
– Mohsin Mehmood, Commented May 22, 2018 at 21:32
@MohsinMehmood I know what the goal is. It won't be accomplished by simply appending the response to the body. — Scott Marcus
– Scott Marcus, Commented May 22, 2018 at 21:37

Mike Robinson · Accepted Answer · 2018-05-22 21:29:44Z

2

I interpret your question to mean that the API in question returns "a complete HTML page" as part of a JSON-encoded payload. (Which is actually a fairly-common thing to do.)

My candid answer is that this should be done by code that is added on the ''server'' side. (That is to say, the server should be modified to return HTML that includes the necessary JavaScript voodoo.) Meanwhile, the client should require no change.

Here's why: "once your Alice jumps down that rabbit-hole, there's just no way out." You wind up creating extremely fragile code on one side or the other which becomes a maintenance nightmare. Therefore, practice the principle of "separation of concerns." The server's concern is to provide the appropriate HTML; the client's concern is merely to display it. Keep it that way.

answered May 22, 2018 at 21:29

Mike Robinson

9,0516 gold badges33 silver badges50 bronze badges

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

2 Comments

mhunt2015 Over a year ago

You have some good points. By "client", I just meant the people I'm writing this code for. I'm doing this for my job, and unfortunately, I'm not in a position where I have direct access to speak with the clients to suggest alternatives. The deadline is quickly approaching, and the project manager is really getting on my case about this. I'm tempted to just say it's not possible to do, but I just wanted to try and confirm that. Thank you!

JosephDoggie Over a year ago

perhaps 'customer' would be a better term than 'client' as 'client' is over-loaded...

Collectives™ on Stack Overflow

Returning HTML in JSON Format and Calling a Function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related