-1

Eu queria uma maneira de inserir o output do meu js ON.value | OD.value | SKU.value em um ficheiro json. Resumindo eu queria que o meu js criasse uma array com o a informação ON.value | OD.value | SKU.value do js no formato que eu apresentei abaixo do JS. Qualquer informação adicional necessária porfavor diga! Estou a usar o electron ou seja a informação pode ser gravada ofline localmente!

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);
}

Formato json

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

Caso seja necessário tem aqui o website todo:

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>

6
  • Você quer alterar o arquivo JSON pelo JS no lado do cliente?
    – Costamilam
    Commented 18/02/2019 às 20:11
  • 1
    @GuilhermeCostamilam Eu quero que sempre que seja inserida informação do lado do cliente essa informação seja inseriada num novo arraw dentro do json ! Espero ter esclarecido a sua duvida!
    – user132381
    Commented 18/02/2019 às 20:20
  • Isso você só poderá fazer no lado do servidor, usando PHP ou, caso deseje utilizar o javascript, utilizar o NodeJS Commented 18/02/2019 às 20:22
  • Então é preciso alterar/adicionar conteúdo no arquivo JSON, como não comentou nada sobre backend imagino que queira fazer isso com JS no lado do cliente, ou não?
    – Costamilam
    Commented 18/02/2019 às 20:23
  • @GuilhermeCostamilam Se fosse possivel sim senão estou aberto para alternativas!
    – user132381
    Commented 18/02/2019 às 20:25

2 Respostas 2

0

Já tentou com interpolação de strings?

Tipo

{
  "${on.value}":[
    {
      "ORDER NAME": "${ON.value}",
      "ORDER DATE": "${OD.value}",
      "SKU": "${SKU.value}"
    }
  ]
}
2
  • Obrigado Hudson PH Commented 19/02/2019 às 14:36
  • 1
    Guilherme podia dar up na pergunta para eu perder o ban de conta?
    – user132381
    Commented 20/02/2019 às 21:15
0

Basicamente o que quer é persistir os dados pelo lado do cliente

É possível guardar os dados localmente usando LocalStorage/SessionStorage, Cookie ou Web SQL, porém ficará salvo apenas na máquina dos usuários, você não terá acesso direto a esses dados

Alternativas para salvar os dados online:

  1. Criar uma aplicação backend que salve num banco de dados (SQL: MySQL, SQL Server, NoSQL: MongoDB, CouchCB) ou em arquivos com alguma linguagem server side (por exemplo, PHP, JavaScript (NodeJS), Python, Java, entre muitas outras)

  2. Usar um BaaS (Backend as a Service), por exemplo o Firebase

4
  • 1
    Como eu estou a utilizar o Eletron funciona como uma app ou seja os ficheiros apenas presisam de ser gravados no pc do utilizador e json pareceume uma forma viavel!
    – user132381
    Commented 18/02/2019 às 20:48
  • Na pergunta não avisou que era uma aplicação desktop com electron, presumi que fosse web. Não conheço muito o electron mas sei que funciona como um "navegador desfarçado", imagino que as opções locais que citei estejam disponíveis nele. Não tenho certeza mas acho que o electron não permite acessar o sistema de arquivos
    – Costamilam
    Commented 18/02/2019 às 20:52
  • Eu tenho usado json para que js possa receber informação mas nao sei como dar inserir info no json pelo js! Mas neste caso eu precisava que desse load da info no json mas criasse aotomaticamente uma nova array para cada order !
    – user132381
    Commented 18/02/2019 às 20:55
  • Guilherme podia dar up na pergunta para eu perder o ban de conta?
    – user132381
    Commented 20/02/2019 às 21:15

Você deve fazer log-in para responder a esta pergunta.