• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyświetlenie danych z pliku json na stronie w aplikacji NODE.JS

VPS Starter Arubacloud
0 głosów
485 wizyt
pytanie zadane 8 kwietnia 2021 w JavaScript przez rszczepanski02 Obywatel (1,180 p.)

Dzień dobry. Mam pewien mały problem. Obecnie uczę się node.js i express'a i chciałem sobie poćwiczyć tworząc prosty projekt wysyłania i wyświetlania komentarzy na stronie internetowej. Komentarze umieszczane są w pliku json i wysyłane za pomocą prostego formularza w pug. Wysyłanie działa, jednak mam problem z wyświetleniem komentarzy. Wiem, że moduł fs jest asynchroniczny i z tego też względu mam duży problem, gdyż przekazanie danych z CommentController.js do index.js powoduje zwrot wartości w postaci undefined. Liczę na pomoc :)

index.js

const express = require('express');
const router = express.Router();
const CommentController = require('../controllers/CommentController');

/* GET home page. */
router.get('/', function(req, res, next) {

  CommentController.getObject;

  res.render('index', { title: 'Komentarze'});
});

router.post('/', CommentController.store)

module.exports = router;

 

CommentController.js

const fs = require('fs');

function getObject(data) {
    return data;
}


module.exports = {
    store: (req, res) => {

        let name = req.body.name;
        let comment = req.body.comment;
    
        if(name == '' || comment == '') {
            res.render('index', {title: 'Komentarze', error: 'Musisz wypełnić formularz'});
        } else {
    
            fs.readFile('data.json', 'utf-8', (err, data) => {
                if(err) return res.render('index', {title: 'Komentarze', error: 'Nie udało się wysłać komentarza'});
                else {
                    let arrayObjects = JSON.parse(data);
                    arrayObjects.comments.push({
                        "name": name,
                        "comment": comment
                    });
    
                    fs.writeFile('data.json', JSON.stringify(arrayObjects), 'utf-8', (err) => {
                        if(err) return res.render('index', {title: 'Komentarze', error: 'Musisz wypełnić formularz'});
                        else {
                            res.render('index', {title: 'Komentarze', success: 'Komentarz został wysłany!'}); 
                        }
                    });
                }
            });
        }  
    },

    object: () => {
        fs.readFile('data.json', 'utf-8', (err, data) => {
            if(err) return res.render('index', {title: 'Komentarze', error: 'Nie można wyświetlić listy komentarzy!'});
            else {
                let jsonData = JSON.parse(data);
                let objectList = jsonData.comments;
                return objectList;
            }
        });
    }
};

 

index.pug

extends layout

block content
  header
    .container
      h1= title
      p Wypełnij formularz, aby dodać komentarz
  
  .container
    form(action="/" method="POST")
      input(type="text" name="name" placeholder="Wpisz swoją nazwę")
      textarea(type="text" name="comment" placeholder="Treść komentarza")
      button(id="comment-submit" class="btn-primary") Wyślij
    
    .alert-box
      p(class="error-alert")= error
      p(class="success-alert")= success

    .comments-object
      .comment-name
        p
      .comment-body
        p

 

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

 

Pozdrawiam :)

2 odpowiedzi

0 głosów
odpowiedź 8 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Wiem, że moduł fs jest asynchroniczny

Jeśli operacja wczytywania pliku nie będzie odczuwalnie spowalniać wątku, to możesz skorzystać z synchronicznego odpowiednika.

Co do problemu, to użycie return w callbacku przekazanym do asynchronicznej funkcji nie będzie działać, bo nie da się zwrócić wartości z kodu asynchronicznego. Możesz przekazać wartość wyjściową do callbacka, albo zwrócić całość w postaci promisa - po stronie Node możesz skorzystać z utila do wrapowania funkcji w promisy.

Z tego co widze, to moduł CommentController ma prywatną funkcję getObject, ale udostępnia metodę object - więc nie wiem co ma na celu użycie CommentController.getObject w module index.js?

komentarz 8 kwietnia 2021 przez rszczepanski02 Obywatel (1,180 p.)
Mógłbyś proszę podać jakiś przykład w kodzie? Ciężko mi się odnieść w dokumentacji node. Jeszcze jestem w tym zbyt lewy.

Co do ostatniego akapitu to wiem. Po prostu trochę kombinowałem i zostało to po starym kodzie.
1
komentarz 8 kwietnia 2021 przez rszczepanski02 Obywatel (1,180 p.)
W sposób synchroniczny się udało jednak chciałbym również wiedzieć jak to zrobić przy użyciu asynchronicznym.
komentarz 8 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Niech funkcja zwraca promisa (możesz zawczasu owinąć fs.readFile we wspomniany utils.promisify):

    object: () => {
        return new Promise((resolve, reject) => { // zwrócenie promisa
          fs.readFile('data.json', 'utf-8', (err, data) => {
              if(err) {
                 res.render('index', {title: 'Komentarze', error: 'Nie można wyświetlić listy komentarzy!'});
                 reject(err); // odrzucenie promisa
              }
              else {
                  let jsonData = JSON.parse(data);
                  let objectList = jsonData.comments;

                  resolve(objectList); // rozwiązanie promisa
              }
          });
        })
    }

i wywołanie:

CommentController.object()
  .then(
     value => console.log('value:', value), 
     error => console.error('error:', error)
   );

 

0 głosów
odpowiedź 8 kwietnia 2021 przez rszczepanski02 Obywatel (1,180 p.)

Udało mi się rozwiązać ten problem, jednak pojawił się inny i tym razem nie mam pojęcia skąd się może brać.

D:\web dev\kurs node.js\express-comments\views\index.pug:21 19| 20| .grid-box > 21| each test in data 22| .comments-object 23| .comment-name 24| p= test.name Cannot read property 'length' of undefined

 

W momencie wysyłania nowego komentarza na serwer pętla umieszczona w pug nie może odczytać właściwości length. Nie mam pomysłu heh.

 

CommentController.js

const fs = require('fs');

module.exports = {
    store: (req, res) => {

        let name = req.body.name;
        let comment = req.body.comment;
    
        if(name == '' || comment == '') {
            res.render('index', {title: 'Komentarze', error: 'Musisz wypełnić formularz'});
        } else {
    
            fs.readFile('data.json', 'utf-8', (err, data) => {
                if(err) return res.render('index', {title: 'Komentarze', error: 'Nie udało się wysłać komentarza'});
                else {
                    let arrayObjects = JSON.parse(data);
                    arrayObjects.comments.push({
                        "name": name,
                        "comment": comment
                    });
    
                    fs.writeFile('data.json', JSON.stringify(arrayObjects), 'utf-8', (err) => {
                        if(err) return res.render('index', {title: 'Komentarze', error: 'Musisz wypełnić formularz'});
                        else {
                            res.render('index', {title: 'Komentarze', success: 'Komentarz został wysłany!'}); 
                        }
                    });
                }
            });
        }  
    },

    object: (req, res) => {

        fs.readFile('data.json', (err, data) => {
            let obj = JSON.parse(data);
            if (err) res.send(err);
            res.render('index', {
                title: 'Komentarze',
                data: obj.comments
            });
        });

    }
};

 

index.js

const express = require('express');
const router = express.Router();
const CommentController = require('../controllers/CommentController');

/* GET home page. */
router.get('/', CommentController.object);

router.post('/', CommentController.store)

module.exports = router;

 

index.pug

extends layout

block content
  header
    .container
      h1= title
      p Wypełnij formularz, aby dodać komentarz
  
  .container
    .left-side
      form(action="/" method="POST")
        input(type="text" name="name" placeholder="Wpisz swoją nazwę")
        textarea(type="text" name="comment" placeholder="Treść komentarza")
        button(id="comment-submit" class="btn-primary") Wyślij
      
      .alert-box
        p(class="error-alert")= error
        p(class="success-alert")= success

    .grid-box
      each test in data
        .comments-object
            .comment-name
              p= test.name
            .comment-body
              p= test.comment

 

Podobne pytania

0 głosów
1 odpowiedź 363 wizyt
0 głosów
1 odpowiedź 1,508 wizyt
pytanie zadane 8 kwietnia 2018 w JavaScript przez jegor377 Stary wyjadacz (13,230 p.)
0 głosów
0 odpowiedzi 142 wizyt

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...