How to display json array data in html after using sendFile in node Js

Question

enter image description hereI have an HTML file named as index.html.

The file contains a JSON array data as added below.

I want to display this array using div tag, The HTML code is given below :

Code

//node js code
res.sendFile(__dirname+'/index.html',{data:JSON.stringify(data)});

//html code 
<% var d = JSON.parse(data); for (var i= 0; i < JSON.parse(data)[0].length; i++) { %>
                    <div class="col-md-12 mt-3 border-bottom p-2 chat-select ">
                        <div class="row">
                            <div class="user-chat-img">
                                <img src="img/user.jpg">
                            </div>
                            <div class="">
                                <p class="font-weight-bold"><%= d[0][i].name %></p>
                                <span>Hello I am DK Singha   </span>
                            </div>
                        </div>
                    </div>

                    <% } %>

Please suggest me how to resolve this problem.

seunggabi · Accepted Answer · 2019-12-26 05:37:34Z

1

I found this.
res.sendfile in Node Express with passing data along

rewrite.

// NodeJS
const target = '$$$data$$$';
fs.readFile(__dirname+'/index.html', (err, html) => {
    res.send(html.replace(target, JSON.stringify(data)));
});


// HTML
<script>
var data = '$$$data$$$$';
data = JSON.parse(data)[0];
for (var i= 0; i < data.length; i++) { 
    console.log(data[i].name);
}
</script>

this is working?

edited Dec 26, 2019 at 5:37

answered Dec 25, 2019 at 9:42

seunggabi

1,83216 silver badges13 bronze badges

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

5 Comments

user3834344 Over a year ago

Loop is not working properly and at the place of <% var data = '$$$data$$$$'; for (var i= 0; i < JSON.parse(data)[0].length; i++) { %> and <%= d[0][i].name %> it is dislaying the same result like <% var data = '$$$data$$$$'; for (var i= 0; i < JSON.parse(data)[0].length; i++) { %> and <%= d[0][i].name %>

user3834344 Over a year ago

Can you suggest me How can we display data using loop?

user3834344 Over a year ago

I have added the picture @seunggabi

seunggabi Over a year ago

@user3834344 okay I understand code. You have to add script append HTML elements

seunggabi Over a year ago

@user3834344 stackoverflow.com/questions/18703780/…

snaipeberry · Accepted Answer · 2019-12-25 11:29:28Z

0

I suggest you to use view engine, such as twig, pug or blade. If you are working with Express, it's super easy to setup and use. You would be able to pass your data to your view in your Express router like this:

app.get('/', function (req, res) {
    res.render('index', { title: 'Hey', message: 'Hello there!'});
});

And then use your JSON variables in your view, you can see the twig documentation here: Twig Doc

For example here, it would be {{ title }} or {{ message }} to use those variables. You can implement for loop, conditions and more using view engines.

answered Dec 25, 2019 at 11:29

snaipeberry

1,0991 gold badge9 silver badges24 bronze badges

2 Comments

user3834344 Over a year ago

But I have to do code in Node Js with html and Twig is related to php

snaipeberry Over a year ago

Can you precise your needs, you can achieve this using nodejs html and twig. What is the relation with php ? Can you explain ?

Collectives™ on Stack Overflow

How to display json array data in html after using sendFile in node Js

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related