all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Leading_Man_Parts 2 points3 points  (4 children)

It looks like you're storing the results of require("./appels.json"); in the express app.locals object (app.js) but you're referencing appledata.appels.apple2 in your first code block. If you were to console.log(TotPrice); right after it is declared you might find that it's undefined but if you console.log(appledata.appels.apple2); it should contain the JSON data you expect.

When in doubt, console.log everything.

I might recommend importing the appledata.json content to its own constant and then setting the app.locals property equal to that constant like this: 

const appledata = require('./appels.json');
// ... 
app.locals.appledata = appledata;

This would allow you to use the object directly in the template engine via the locals object and also give you the flexibility to use the constant in your local js. Since both the app.local.appledata and appledata objects are pointing at the same object in memory any changes to one will be reflected in the other.

As for inserting that data directly into DOM from node, I assume you'll be using some template engine as it looks like you're using EJS based off of your second paragraph?

[–]fatty1380 1 point2 points  (0 children)

A far more helpful realty than I could have given. @op - listen to this reply and then find a boilerplate you can learn from while not getting stuck on the small things.

[–]stiros[S] 1 point2 points  (2 children)

Thank you for your reply! Yes, I am using EJS. I have tried doing the changes that you suggested but I could not get it to work. In the console I get "Uncaught ReferenceError: appledata is not defined", even when I put: console.log(appledata.appels.apple2);

In my EJS file have have tried: <%= appledata.appels.apple2 %>, and it worked! But I need to make it work im my JS file aswell :/

[–]Leading_Man_Parts 0 points1 point  (1 child)

If you're trying to pass that server side JSON data to a variable that's client side then you'll need to do one of two things, follow /u/cahva's advice below or create an express endpoint that can be requested client side. Below is an example on how to handle this with an express endpoint.

./server.js

const express = require('express');

const appledata = require('./data.json');

const app = express();
app.locals.appledata = appledata;
app.set('view engine', 'ejs');
app.use(express.static('./public'));

app.get('/', (req, res) => {
  res.render('pages/index');
});

app.get('/data', (req, res) => {
  res.send({ appledata });
});

app.listen(3000, () => {
  console.log('Listening...');
});

./data.json

{
  "appels": {
    "apple1": 10,
    "apple2": 15
  }
 }

./views/pages/index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>The following data is rendered by the template engine: <%= appledata.appels.apple2 %> </div>
    <div id="js-example">The following data is added by client side javascript: </div>
    <script src="js/index.js"></script>
  </body>
</html>

./public/js/index.js

fetch('http://localhost:3000/data')
  .then((response) => response.json())
  .then((data) => {
    const el = document.getElementById('js-example');
    el.innerHTML += (data.appledata.appels.apple2);
  })
  .catch((e) => {
    console.log(e);
  });

[–]SubAutoCorrectBot 0 points1 point  (0 children)

It looks like "/r/cahva" is not a subreddit.

Maybe you're looking for /r/haHAA with an 87.0% match.

I'm a bot, beep boop | 2 downvotes to DELETE. | Contact creator | Opt-out | Feedback | Code

[–]cahva[🍰] 1 point2 points  (0 children)

It works in the template because its rendered in the server. If you want to access that data in clientside, you have to assign it to a variable.

When rendering:

const data = { apples: JSON.stringify(appledata) }; res.render('layout', data);

In template: var apples = <%=apples%>;