0

*** Nobody could answer this question, so another hour of googling and the answer is the Mustache client side template engine.

Hope it helps someone.

I have done a fare bit of googling, about 6 hours worth, I can assure you that this question has never been answered properly.

If I have a JSON load of comments, what is the most elegant, clean, efficient way of returning the html elements to the page using javascript/jQuery?

For example;

jsonComments = {"comments": 
    [{"username":"bob", "location":"Earth", "comment":"hello"},
    {"username":"bob", "location":"Earth", "comment":"hello"},
    {"username":"bob", "location":"Earth", "comment":"hello"},
    {"username":"bob", "location":"Earth", "comment":"hello"}]

$.each( response.payload, function( i, val ) {
     var comment = "<div class='comments-wrapper'><div>" + username + "</div><div>" + 
location + "</div><div>" + comment + "</div></div>";
    $('#comments').append(comment);
});

that is absolutely hideous, I want that html to be on its own page tucked away somewhere outside of the function. For example, in php I would just use

foreach($comments as $comment) {
   ob_start();
   include('commentsBox.php');
   $comment = ob_get_contents();
   ob_end_clean();
   echo $comment;
}

and inside the commentsBox.php

<?php ?>
<div class="comments-wrapper">
    <div><?=$comment["username"]; ?></div>
    <div><?=$comment["location"]; ?></div>
    <div><?=$comment["comment"]; ?></div>
</div>

Need and tidy and beautiful. How do I achieve the same results with javascript BESIDES using anything to do with node.js, I am not skilled enough to go down that road yet. Is this possible?

Or is there a nice way to do while still using php and javascript together, without like I said adding all the html to a json and returning it that way, cause thats just gross as well.

Thanks

donny90210
  • 71
  • 1
  • 9
  • Unless you're going to go down the route of a framework, doing what you're doing currently is just fine for trusted inputs - seems to be just a question of how to concatenate nicely. Feel free to abstract it behind a function, that should be pretty trivial. For reasonably sized projects, I'd recommend something like React to make this sort of thing even easier. `
    {jsonComments.map(c =>
    {c.username}
    c.location
    )}
    ` or something along those lines     – CertainPerformance Dec 10 '21 at 23:24
  • Isn't there options like jquery load()? it seems weird that you wouldnt be able to d anything like tht – donny90210 Dec 10 '21 at 23:27
  • Sure, if you already have the JSON data transformed into an HTML string on the server, you can make a request to the server and inject that. – CertainPerformance Dec 10 '21 at 23:28
  • @CertainPerformance right, which is fine to do, but it looks ugly a bunch of html in a json file, because I return counts and other stuff up as well, I dont just echo the html back up. – donny90210 Dec 10 '21 at 23:30
  • @CertainPerformance my return would look something like array( "commentsArray" => $commentsArray, "commentsCount" => $commentsCount, "topComment" => $topCommentsArray ) – donny90210 Dec 10 '21 at 23:31
  • @CertainPerformance which is why I was hoping to have a nicer way to display that in the ,.js file and just include those html string when I need them, I can't stand looking at all that +
    + " etc it looks so ugly
     – donny90210 Dec 10 '21 at 23:32
  • If you don't want to turn it into an HTML string on the server, then you have to do it on the client. Can't be neither. You'll have to pick one. – CertainPerformance Dec 10 '21 at 23:32
  • @certainperformance which is my question what is the most elegant beautiful way to turn that into an html string without having all the html cluttered in the return function. I want that outside the function somewhere else and called as needed, cause multiple different Hank strings could be called depending on the return such as “no more posts” = no more posts html element – donny90210 Dec 10 '21 at 23:36
  • Feel free to abstract the code into a separate function somewhere else..? – CertainPerformance Dec 10 '21 at 23:37
  • Well you actually have answered my question, there is no way, so that is most likely why its never been answered. I do appreciate your time discussing it with me though. – donny90210 Dec 10 '21 at 23:39

0 Answers0