Блог

Главная - Вопросы по программированию - Объект Json не отображается в broswer

Объект Json не отображается в broswer

#node.js #json

#node.js #json

Вопрос:

Здравствуйте, я использую NodeJS и хочу создать приложение, в котором я хочу сделать post-запрос с объектом Json из Postman или curl, мое приложение получит объект Json, и он отобразит объект в broswer.

Итак, я попытался это сделать, но у меня проблема в том, что объект json не отображается в broswer (я использую npm hbs, но также пробовал без этого).

мой код NodeJS:

 app.use(express.json())      
app.use(express.urlencoded({extended:true}))

app.use('/notify',(req,res)=>{
    
    const json = req.body
    console.log(json)
    res.render('index' , {
        title: 'Weather App',
        name:'ApLaz',
        expect: JSON.stringify(json) // I tried and without JSON.stringify
    }) 
})

С запросом Postman я отправляю, например, следующее

 {
    "test": "ok",
    "var": 12
}

Результат из консоли.журнал :

 { ok: 'ok', var: 12 }

Но в broswer я просто беру это:

 {}

Это мой веб-сайт

введите описание изображения здесь

Почему я не могу отобразить свой объект Json в broswer?

Это мой индексный файл

 <!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/style.css">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{{title}}</title>
  </head>
  <body>
        <!-- Header -->
        {{>header}}
        <!-- End Header -->
        
        <div>
          <p>Use this site for the Weather</p>

          <form id="formSearch">
            <input placeholder='Location' id="inputSearchValue">
            <button>Search</button>
          </form>
        </div>
        <br>
        <p id="location">{{expect}}</p>
        
        <p id="forecast"></p>

        <!-- Footer -->
        {{>footer}}
        <!-- End Footer -->

    <script src="js/app.js"></script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Комментарии:

1. В postman вы установили заголовок content-type в application / json?

2. да, я использовал это

3. Пожалуйста, покажите свой индекс, спасибо.

4. Я опубликовал его в своем вопросе

5. может быть, я нашел проблему. Мои данные не извлекаются в режиме реального времени с моего веб — сайта. Мне приходится перезагружать его, когда я делаю некоторые изменения, так что, возможно, это и есть проблема.

Ответ №1:

У меня нет информации, которая мне нужна, чтобы точно соответствовать вашим настройкам, но вот близкий подход. Имейте в виду, что это не так, как вы бы сделали это на самом деле, но будет работать для обучения.

Вы можете думать о хранилище данных как о временной базе данных, которая существует только во время работы приложения. В index.html Я закомментировал / отключил следующее: верхний и нижний колонтитулы, и поскольку вы не предоставили, и я не хочу их создавать: D

Я предлагаю вам продолжить путь freeCodeCamp, поскольку в дальнейшем он будет охватывать хранение данных.

package.json

 {
  "scripts": {
    "start": "node src"
  },
  "dependencies": {
    "express": "^4.17.1",
    "mustache": "^4.1.0",
    "mustache-express": "^1.3.0"
  }
}

src/index.js

 const mustacheExpress = require('mustache-express')
const express = require('express')
const app = express()

app.use(express.json())
app.use(express.urlencoded({extended:true}))
app.engine('html', mustacheExpress());
app.set('view engine', 'html');
app.set('views', __dirname   '/views')


let dataStore = {
    expect: {user: 'jdoe', age: 30},
}

app.use('/',(req,res)=>{
    res.render('index' , {
        title: 'Weather App',
        name:'ApLaz',
        expect: JSON.stringify(dataStore.expect) // I tried and without JSON.stringify
    })
})

app.use('/notify',(req,res)=>{

    const json = req.body
    console.log(json)
    dataStore.expect = json
    res.render('index' , {
        title: 'Weather App',
        name:'ApLaz',
        expect: JSON.stringify(dataStore.expect)
    })
})


app.listen(3000, (err) => {
    if (err) return console.log(err)
    console.log('server listening on port: %s', 3000);
})

src/view/index.html

 <!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/style.css">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{{title}}</title>
</head>
<body>
<!-- Header -->
<!-- >header}}-->
<!-- End Header -->

<div>
    <p>Use this site for the Weather</p>

    <form id="formSearch">
        <input placeholder='Location' id="inputSearchValue">
        <button>Search</button>
    </form>
</div>
<br>
<p id="location">{{expect}}</p>

<p id="forecast"></p>

<!-- Footer -->
<!-- >footer}}-->
<!-- End Footer -->

<!--<script src="js/app.js"></script>-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Чтобы запустить приложение, откройте терминал и запустите yarn start или npm start