Pushing object to array in javascript

Question

I'm newbie in javascript. I was searching in google and in stackoverflow and I can't find explains. I have an input which must save in json and I wan't to show it in console. I have added elements from inputs to array, but it was still adding in one array. I want have something like this:

[
  {"id":"1","name":"Anna"},
  {"id":"2","name":"Mark"}
]

And I want to delete one object from the array when I check it on site and click "Delete" button.

var arr = [];

  
 
function addTo() {
    arr.push(document.getElementById("index").value);
    arr.push(document.getElementById("name").value);
    arr.push(document.getElementById("surname").value);
    
   console.log(arr);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <input placeholder="Name" type="text" id="name"/>
  <input placeholder="Surname" type="text" id="surname"/>
  <input type="button" onclick="remove()" value="Delete"/>
  <input type="button" onclick="addTo()" value="Add"/>
  </body>
</html>

score 1 · Answer 1 · answered Jan 23 '19 at 12:55

You first have to create an object and store values in it, then push that object inside the array

var arr = [];

  
 
function addTo() {
var obj=
    {'index':document.getElementById("index").value,
    'name':document.getElementById("name").value,
    'surname':document.getElementById("surname").value}
    arr.push(obj)
    
   console.log(arr);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <input placeholder="Name" type="text" id="name"/>
  <input placeholder="Surname" type="text" id="surname"/>
  <input type="button" onclick="remove()" value="Delete"/>
  <input type="button" onclick="addTo()" value="Add"/>
  </body>
</html>

score 1 · Answer 2 · answered Jan 23 '19 at 12:55

1

You could build an object with the wanted properties and push this object to the array.

The result is an array of objects, which is in this state not a JSON string, because a JSON is a textual notation of data.

function addTo() {
    arr.push({
        id: document.getElementById("index").value,
        name: document.getElementById("name").value,
        surname: document.getElementById("surname").value
    });
    console.log(arr);
}
var arr = [];

<select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input placeholder="Name" type="text" id="name"/>
<input placeholder="Surname" type="text" id="surname"/>
<input type="button" onclick="remove()" value="Delete"/>
<input type="button" onclick="addTo()" value="Add"/>

answered Jan 23 '19 at 12:55

Nina Scholz

376,160
25
347
392

Thank you. Do you have an idea for a array written like this, display it on the page and select the object etc index:2 and delete it with the button? – Despo Jan 23 '19 at 13:11
you could present the data in a table and give it two buttons for editing or deleting. – Nina Scholz Jan 23 '19 at 13:14
Yes, I know but i don't know how. – Despo Jan 23 '19 at 13:24
maybe you have a look to this question: https://stackoverflow.com/questions/15164655/generate-html-table-from-2d-javascript-array – Nina Scholz Jan 23 '19 at 13:37
could you help me change this to textual notation of data, becouse i can't understand this question. – Despo Jan 23 '19 at 19:53
i don't understand your comment, too. – Nina Scholz Jan 23 '19 at 19:57
Maybe, I said wrong. I would like to have such an effect that I add new elements with new indexes. I save this to the json file, then I display this file in site. And now i can delete any element with any index by button "delete" on site. – Despo Jan 23 '19 at 20:50
how can i help you? – Nina Scholz Jan 23 '19 at 20:52
Could you show me how can i save and delete this in json file? – Despo Jan 23 '19 at 20:58
actually i see not file. please ask a new question with a complete problem description and what you already have. – Nina Scholz Jan 23 '19 at 21:04

score 1 · Accepted Answer · answered Jan 23 '19 at 13:37

This code with remove function and check existing items:

function remove() {
var obj={
    'index': document.getElementById("index").value
    };
    for(var i = arr.length - 1; i >= 0; i--) {
        if(arr[i]['index']===obj['index']) {
           arr.splice(i, 1);
        }
    }
    console.log(arr);
}
function addTo() {
var obj={
    'index': document.getElementById("index").value,
    'name': document.getElementById("name").value,
    'surname': document.getElementById("surname").value
    };
   
   if (!arr.some(e=>e['index']==obj['index'])) 
       // add new
       arr.push(obj);
   else
       // replace existing
       arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index']==obj['index'])[0][0]] = obj
   console.log(arr);
}


var arr = [];

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<label for="index">Index:</label>
  <select id="index" name="index">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <input placeholder="Name" type="text" id="name"/>
  <input placeholder="Surname" type="text" id="surname"/>
  <input type="button" onclick="remove()" value="Delete"/>
  <input type="button" onclick="addTo()" value="Add"/>
  </body>
</html>

Thanks, but in searching solution when i display an array in table format in site and then i can check one object and delete him. — Despo, Jan 23 '19 at 18:32

Pushing object to array in javascript

3 Answers3