ton1
ton1

Reputation: 7628

Express.js to EJS rendering data partially

Imagine the Database like below.

// 'Article'  Schema
{ 
subject : 'Hello world', 
content : 'I want to display this content partially. 
           The content would has verbose text like long
           blabla...........blabla.......blabla......blabla...........
           blabla.......blabla......blabla...........b........
           and even more, It would has <img src=".......jpg"/>
}

Now I render this data to some ejs file,

<table>
<% Articles.forEach(function(article, index){ %>
    <tr>
       <td> <%= article.subject %> </td>
       <td> <%= article.content %> </td>
    </tr>
<% }) %>
</table>


// To don't display verbosely, give style attribute (Of course, on top of html)

<style>
     td { white-space: nowrap; overflow: hidden; }
</style>

But this way, It maybe decrease application performance, right? If there are 10, 20, 30 articles on one page, The server will try to display whole of this things. What I want to make is some summary of contents, How can I do this cleverly?

Upvotes: 0

Views: 220

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

For summery contents,display initial few text with ellipses in the end

<table>
<% Articles.forEach(function(article, index){ %>
    <tr>
       <td> <%= article.subject %> </td>
       <td> <%= article.content.substring(0,10) %> ...</td>
       <td> <a id="read_more" content_id="cont-id" href = "javascript:(void)"> read more..</a></td>
    </tr>
<% }) %>

Then use ajax application to get complete data on click of read more depend whether are you using jquery or angular etc.

And if there are more article then do pagination with ajax application or page refresh

On node side create API which gives this content data or new articles in the same format that you did during page load

Upvotes: 2

Related Questions