Push to a JSON file

Question

Good morning, I tried to push a temporaly value to a JSON file with the comand "MyJSON.name.push" but it tells me: "Undefined its not an object". I tried some forms and with javascript arrays worked but I need to do it on external JSON file. The error only appears if I click some button. Someone can help me? Thanks you. html:

<!DOCTYPE html>
<html>

<head>

    <title>SSL Checker</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/json.json" charset="utf-8"></script>
</head>

<body onLoad="start()">
    <div id="title">
        <h1>SSL Checker</h1>
    </div>
    <div id="data">
        <form action="javascript:void(0);" method="POST" onsubmit="SSL.Add()">
            <input type="text" id="add-name" placeholder="Name"></input>
            <input type="text" id="add-link" placeholder="Link"></input>
            <input type="submit" value="Add">
        </form>

        <div id="edit" role="aria-hidden">
            <form action="javascript:void(0);" method="POST" id="saveEdit">
                <input type="text" id="edit-name">
                <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
            </form>
        </div>
        <p id="counter"></p>
    </div>
    <div id="table">
        <table style="overflow-x:auto;">
            <tr>
                <th>Sites:</th>
            </tr>
            <tbody id="urls">
            </tbody>
        </table>
    </div>
</body>


</html>

js:

function start() {
var SSL = new function() {
            //List urls to check
            this.el = document.getElementById('urls');
            this.Count = function(data) {
                var el = document.getElementById('counter');
                var name = 'url';

                if (data) {
                    if (data > 1) {
                        name = 'urls';
                    }
                    el.innerHTML = 'There are:' + ' ' + data + ' ' + name;
                } else {
                    el.innerHTML = 'No ' + name;
                }
            };
            //Buttons configuration
            this.FetchAll = function() {
                var data= '';

                if (MyJSON.length > 0) {
                    for (i = 0; i < MyJSON.length; i++) {
                        data += '<tr>';
                        data += '<td><a href="' + MyJSON[i].url + '">' + MyJSON[i].name+ '</a></td>';
                        data += '<td><button onclick="SSL.Edit(' + i + ')">Edit</button></td>';
                        data += '<td><button onclick="SSL.Delete(' + i + ')">Delete</button></td>';
                        data += '</tr>';

                    }
                }

                this.Count(MyJSON.length);
                return this.el.innerHTML = data;
            };
            //Add name
             this.Add = function() {
            el = document.getElementById('add-name');
            el1 = document.getElementById('add-link')
            var url = el.value;
            var url1 = el1.value;
            if (url) {
                if (url) MyJSON.push('{name:"url",url:"url1"}')
                el.value = '';
                this.FetchAll();
            }
        }                
            //Edit
            this.Edit = function(item) {
                var el = document.getElementById('edit-name');
                el.value = MyJSON.name[item];
                document.getElementById('edit').style.display = 'block';
                self = this;
                document.getElementById('saveEdit').onsubmit = function() {
                    var url = el.value;
                    if (url) {
                        self.name.splice(item, 1, url.trim());
                        self.FetchAll();
                        CloseInput();
                    }
                }
            }; 
           //Delete
            this.Delete = function(item) {
                MyJSON.urls.splice(item, 1);
                this.FetchAll();
            };

        };

        SSL.FetchAll();

        function CloseInput() {
            document.getElementById('edit').style.display = 'none';
        }
    window.SSL= SSL;
}

JSON FILE(json.json):

var MyJSON = [{
        name:"Google",
        url: 'google.es',
    },
    {
        name:"Yahoo",
        url: 'yahoo.com',
    }
]

_Good morning_? It's 13:34 here in Sri Lanka... Post only the question. No greetings required. — Roshana Pitigala, May 22 '18 at 08:04
Ok, first of all that's not JSON. It's just a normal JavaScript script file that defines a variable that contains an array of objects. See [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) Secondly, what is `MyJSON.name.push()` even supposed to do? `name` is a string, you can't push anything to it. — JJJ, May 22 '18 at 08:06
so, how can I add values to this array of objects? for example, add { name: "gmail"; url: "gmail.com" } — Joanmi, May 22 '18 at 08:07
@JJJ it's a string on each entry. The code is not even doing `MyJSON[0].name` OP, Look at arrays at a basic level, at least. — VLAZ, May 22 '18 at 08:08
Yeah but It have to do it automatically when I pressed the button "Add" — Joanmi, May 22 '18 at 08:13
@vlaz. Let's say `var obj = [{name: "abc", url: "www.google.com"}]`, then this can be pushed to the array like `MYJSON.push(obj[0]);` — Harsh Jaswal, May 22 '18 at 08:16
@vlaz I tried it, but I need to take value from variable, I put MyJSON.push('{name:"url",url:"url1"}') but when I add it, it shows undefined. — Joanmi, May 22 '18 at 08:21
@Joanmi in your `Add()` function what is the use of second `if`?..It is not required at all. — Harsh Jaswal, May 22 '18 at 08:22
Ok, I has a partial answer from @harsh jaswal but now it tells Undefined I dont know why — Joanmi, May 22 '18 at 08:27

score 0 · Accepted Answer · answered May 22 '18 at 08:26

0

Change your this.Add() function like this:

this.Add = function() {
        el = document.getElementById('add-name');
        el1 = document.getElementById('add-link')
        var url = el.value;
        var url1 = el1.value;
        if (url) {
            MyJSON.push({"name":url,"url":url1})
            el.value = '';
            this.FetchAll();
        }
    }

answered May 22 '18 at 08:26

Harsh Jaswal

447
3
14

Glad to help you. :) – Harsh Jaswal May 22 '18 at 08:29
I just started this week with JS and I have some difficults, I'll have problems to "edit" and "delete" but I'll try to solve it, If I can't I'll post another question on 1 or 2 days :) – Joanmi May 22 '18 at 08:34

Push to a JSON file

1 Answers1