How to Save Input From HTML form to JSON File Using Body-Parser

PHOTO

Saved by [deleted user] #html #nodejs

<form action="/new" method="post">

  <input name="title" type="text">
  <input name="description" type="text">
  <input name="steps[0][text]" type="text">
  <input name="steps[0][ingredients]" type="text">
  <input name="steps[1][text]" type="text">
  <input name="steps[1][ingredients]" type="text">
  <button type="submit">Submit Form</button>

</form>

COPY

This method assumes you have a Schema Model and are saving the JSON file using the Mongoose package. Also Body-parser package in installed. Example of the JSON Schema we are saving: const recipeSchema = new Schema({ title: { type: String , required: true}, description: { type: String , required: true}, steps:[{ text:{type:String}, ingredients:{type:String} }]});

Save snippets that work from anywhere online with our extensions

Comments

More like this

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#html #javascript

Stop YouTube Embedded Video from Playing with Javascript

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

#css #html

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#html

Bootstrap Starter Template

<!doctype html>
<html lang="en">
  <head>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

#html #alpinejs

Set boolean to true after scrolling on page using Alpine.js

<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>

#nodejs

Memcached Cloud session store with express-session to preserve sessions off-server

var express = require("express");
var app = express();
const session = require('express-session');
var MemcachedStore = require('connect-memjs')(session);

// configure sessions
var store = new MemcachedStore({servers: [process.env.MEMCACHEDCLOUD_SERVERS], username: process.env.MEMCACHEDCLOUD_USERNAME, password: process.env.MEMCACHEDCLOUD_PASSWORD});
app.use(session({ secret: 'keyboard cat',
   resave: true,
   saveUninitialized: true,
   cookie: { secure: true }, 
   store: store
}))

#nodejs

Express Post Request to Edit Post

router.post('/:id/edit', auth.requireLogin, (req, res, next) => {
  Post.findByIdAndUpdate(req.params.id, req.body, function(err, post) {
    if(err) { console.error(err) };

     res.redirect(`/`+req.params.id);
  });
});

#bcrypt #authentication #express #nodejs #password

Async function for bcrypt.compare()

const comparePassword = async (password, hash) => {
    try {
        // Compare password
        return await bcrypt.compare(password, hash);
    } catch (error) {
        console.log(error);
    }

    // Return false if error
    return false;
};

//use case
(async () => {
    // Hash fetched from DB
    const hash = `$2b$10$5ysgXZUJi7MkJWhEhFcZTObGe18G1G.0rnXkewEtXq6ebVx1qpjYW`;

    // Check if password is correct
    const isValidPass = await comparePassword('123456', hash);

    // Print validation status
    console.log(`Password is ${!isValidPass ? 'not' : ''} valid!`);
    // => Password is valid!
})();

#sql #nodejs

javascript - Import sql file in node.js and execute against PostgreSQL - Stack Overflow

function processSQLFile(fileName) {

  // Extract SQL queries from files. Assumes no ';' in the fileNames
  var queries = fs.readFileSync(fileName).toString()
    .replace(/(\r\n|\n|\r)/gm," ") // remove newlines
    .replace(/\s+/g, ' ') // excess white space
    .split(";") // split into all statements
    .map(Function.prototype.call, String.prototype.trim)
    .filter(function(el) {return el.length != 0}); // remove any empty ones

  // Execute each SQL query sequentially
  queries.forEach(function(query) {
    batch.push(function(done) {
      if (query.indexOf("COPY") === 0) { // COPY - needs special treatment
        var regexp = /COPY\ (.*)\ FROM\ (.*)\ DELIMITERS/gmi;
        var matches = regexp.exec(query);
        var table = matches[1];
        var fileName = matches[2];
        var copyString = "COPY " + table + " FROM STDIN DELIMITERS ',' CSV HEADER";
        var stream = client.copyFrom(copyString);
        stream.on('close', function () {
          done();
        });
        var csvFile = __dirname + '/' + fileName;
        var str = fs.readFileSync(csvFile);
        stream.write(str);
        stream.end();
      } else { // Other queries don't need special treatment
        client.query(query, function(result) {
          done();
        });
      }
    });
  });
}

#javascript #nodejs #handlebars #express

Pagination Helper for Handlebars - Node.js Express

https://gist.github.com/trantorLiu/5924389

#javascript #nodejs

Slugify a Field in Mongoose Schema

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var slug = require('mongoose-slug-generator');

mongoose.plugin(slug);

const pageSchema = new Schema({
    title: { type: String , required: true},
    slug: { type: String, slug: "title" }
});

var Page = mongoose.model('Page', pageSchema);
module.exports = Page;

How to Save Input From HTML form to JSON File Using Body-Parser

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet