How can I insert javascript information into a json file

Asked

Viewed 79 times

-1

I wanted a way to insert my js output ON.value | OD.value | SKU.value in a json file. In short I wanted my js to create a array with the information ON.value | OD.value | SKU.value js in the format I presented below JS. Any additional information required please tell us! I’m using Electron, which means the information can be stored ofline locally!

JS

function Form(){
    ON = document.getElementById("ON");
    console.log(ON.value);
    OD = document.getElementById("OD");
    console.log(OD.value);
    SKU = document.getElementById("SKU");
    console.log(SKU.value);
}

Json format

{
  "on.value aqui":[
    {
      "ORDER NAME": "ON.value aqui",
      "ORDER DATE": "OD.value aqui",
      "SKU": "SKU.value aqui"
    }
  ]
}

If necessary, you can find the entire website here:

function appendOrders(orders) {
  var ElementOrders = document.getElementById("Orders")
  ElementOrders.innerHTML = orders
}

function appendEarnings(earnings) {
  var ElementEarnings = document.getElementById("Earnings");
  ElementEarnings.innerHTML = earnings
}

function JSONLOAD() {
  "use strict";

  fetch("Static/Data/DATA.json")
    .then(function(resp) {
      return resp.json();
    })
    .then(function(data){
      var Earnings = data.DataInfo[0].Earnings;
      appendEarnings(Earnings);
      var Orders = data.DataInfo[0].Orders;
      appendOrders(Orders)
    })
}

function Form(){
    ON = document.getElementById("ON");
    console.log(ON.value);
    OD = document.getElementById("OD");
    console.log(OD.value);
    SKU = document.getElementById("SKU");
    console.log(SKU.value);
}

JSONLOAD()
body {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar {
  height: 45px;
}

.MASlime {
  position: absolute;
  font-size: 30px;
  top: 1px;
  left: 40px;
}

#Totals {
  position: absolute;
  font-size: 30px;
}

.Total {
  position: absolute;
  top: 70px;
  left: 130px;
}

.TotalEarnings {
  position: absolute;
  top: 70px;
  left: 200px;
}

.TotalO {
  position: absolute;
  top: 140px;
  left: 130px;
}

.TotalOrders {
  position: absolute;
  top: 140px;
  left: 200px;
}

#Earnings {
  position: absolute;
  top: 70px;
  left: 350px;
}

#Orders {
  position: absolute;
  top: 140px;
  left: 350px;
}

.NewOrder {
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName {
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate {
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU {
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT {
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
  cursor: pointer;
}

.Menu {
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
}

.menu {
  text-align: center;
  width: 100%;
}

.menu a {
  display: block;
  border-bottom: 1px solid #EAEAED;
  border-top: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 120px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 30px;
  background: #252C35;
}

.All {
  display: block;
}

#toggle {
  display: none;
}

.fadeIn {
  animation: fadein 1.3s ease-in;
}

@keyframes fadein {
  0% { opacity: 0; }
  25% { opacity: 0.3; }
  50% { opacity: 0.5; }
  75% { opacity: 0.8; }
  100% { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>EComerce App Slime</title>
    <link rel="stylesheet" href="Static/css/index.css">
    <link rel="icon" href="Static/Images/favicon.png">
  </head>
  <body>
    <div id="menu">
      <label for="toggle" class="Menu">&#9776;</label>
      <input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>
      <div class="menu">
          <a href="#">Slime Recipe</a>
      </div>
    </div>
    <div id="UpperBar">
      <p class="MASlime">MASlime</p>
    </div>
      <div id="HomePage">
        <div id="Totals">
          <p class="Total">Total</p>
          <p class="TotalEarnings">Earnings</p>
          <p class="TotalO">Total</p>
          <p class="TotalOrders">Orders</p>
          <p id="Earnings">100€</p>
          <p id="Orders">1</p>
        </div>
        <div id="NewOrder">
          <p class="NewOrder">New Order</p>
          <form id="OrderForm" onsubmit="Form()">
            <input id="ON" class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" value="" required>
            <input id="OD" class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
            <input id="SKU" class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
            <input class="SUBMIT" type="submit" name="Submit" value="SUBMIT">
          </form>
          <script type="text/javascript">
          input = document.getElementById("ON")
          console.log(input.value)
          </script>
        </div>
    </div>
    <script>
    var home = document.getElementById('HomePage');
    var menu = document.getElementsByClassName('menu')[0];
    menu.style.display = 'none';

    document.getElementById('toggle').onclick = () => {

    if (menu.style.display == 'none') setTimeout(fadeMenu, 150);
    else if(menu.style.display == 'block') setTimeout(fadeHome, 150);
    }

    function fadeMenu() {
      home.style.display = 'none';
      menu.classList.add('fadeIn');
      menu.style.display =  'block';
    }

    function fadeHome() {
      home.style.display = 'block';
      home.classList.add('fadeIn');
      menu.style.display = 'none';
    }
    </script>
    <script src="Static/js/index.js"></script>
  </body>
</html>

javascript json

  • You want to change the JSON file by JS on the client side?

  • 1

    @Guilhermecostamilam I want this information to be inserted into a new array inside the json whenever it is inserted on the client side ! I hope I’ve cleared your doubt!

  • This you can only do on the server side, using PHP or, if you want to use javascript, use Nodejs

  • Then you need to change/add content in the JSON file, as you have not commented anything about backend I imagine you want to do this with JS on the client side, or not?

  • @Guilhermecostamilam If it were possible yes otherwise I’m open to alternatives!

  • @Joãopedrohenrique Since I don’t know how to use PHP could run with nodejs?

Show 1 more comment

2 answers

0

Basically what you want is to persist the data on the client side

It is possible to save the data locally using Localstorage/Sessionstorage, Cookie or Web SQL, but will be saved only on the users' machine, you will not have direct access to this data

Alternatives to save data online:

  1. Create a backend application that saves in a database (SQL: Mysql, SQL Server, Nosql: Mongodb, Couchcb) or in files with some server side language (e.g., PHP, Javascript (Nodejs), Python, Java, among many others)

  2. Use a Baas (Backend as a Service), for example the Firebase

  • 1

    How I’m using Eletron works like an app, so the files just need to be saved to the user’s pc and json seems a viable way!

  • In the question you didn’t notice it was a desktop application with Electron, I assumed it was web. I don’t know much about Electron, but I know that it works as an "enhanced browser," so I imagine the local options I mentioned are available on it. I’m not sure but I think Electron doesn’t allow access to the file system

  • I’ve been using json so that js can receive information but I don’t know how to enter info in json by js! But in this case I needed this load of info in json but to create a new array for each order !

  • William could give up the question so I lose the account ban?

0


Already tried with string interpolation?

Type

{
  "${on.value}":[
    {
      "ORDER NAME": "${ON.value}",
      "ORDER DATE": "${OD.value}",
      "SKU": "${SKU.value}"
    }
  ]
}

  • Thank you Hudson PH

  • William could give up the question so I lose the account ban?

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.