How can i append in javascript?

Question

First off i'll state the obvious, i'm new to javascript,html, and web development tools.

var labels = {{ labels|tojson|safe }};

using console.log i was able to see the content of labels console.log(JSON.stringify(labels)); output:

[
    {"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141"},
    {"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141"},
    {"id":"3","image":"1-0.png","name":"","xMax":"4923","xMin":"4903","yMax":"156","yMin":"145"},
    {"id":"4","image":"1-0.png","name":"","xMax":"4956","xMin":"4931","yMax":"156","yMin":"145"}
]

It's clearly a list of dictionaries, so far so good, now there is new elements i want to append as it runs and WITHOUT REFRESHING THE PAGE Manually, it should auto update, so since i have some experience with python, i quickly thought about appending, something like that :

labels.append({"id":labels.length + 1, 
               "name":"",
               "xMin":xMin,
               "xMax":xMax,
               "yMin":yMin,
               "yMax":yMax
              })

but it isn't working, how can i append that line?

Are you talking about add an object to an array? If yes, you can easily find the answer on google or making some search here in S.O — Calvin Nunes, May 03 '18 at 17:00
Yes adding an object to a list and that object happens to be a dictionary in my case. — user9686018, May 03 '18 at 17:01
Possible duplicate of [How to add an object to an array](https://stackoverflow.com/questions/6254050/how-to-add-an-object-to-an-array) — Calvin Nunes, May 03 '18 at 17:01

Ankit Agarwal · Accepted Answer · 2018-05-03T17:04:05.427

labels is a array type as it has

[{"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141"},{"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141"},{"id":"3","image":"1-0.png","name":"","xMax":"4923","xMin":"4903","yMax":"156","yMin":"145"},{"id":"4","image":"1-0.png","name":"","xMax":"4956","xMin":"4931","yMax":"156","yMin":"145"}]

So you need to use labels.push(obj) to add new object in the labels instead of append()

var labels = [{"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141"},{"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141"},{"id":"3","image":"1-0.png","name":"","xMax":"4923","xMin":"4903","yMax":"156","yMin":"145"},{"id":"4","image":"1-0.png","name":"","xMax":"4956","xMin":"4931","yMax":"156","yMin":"145"}]

var xMin = 1, xMax = 5, yMin = 3, yMax = 8;

labels.push({"id":labels.length + 1, "name":"", "xMin": xMin, "xMax":xMax, "yMin":yMin, "yMax":yMax});

console.log(labels);

score 2 · Answer 2 · answered May 03 '18 at 17:02

Array.prototype.append() does not exist. You need to use Array.prototype.push() if you want to add to it:

Like this:

var labels = [{"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141"},{"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141"},{"id":"3","image":"1-0.png","name":"","xMax":"4923","xMin":"4903","yMax":"156","yMin":"145"},{"id":"4","image":"1-0.png","name":"","xMax":"4956","xMin":"4931","yMax":"156","yMin":"145"}];

console.log(labels);


labels.push({"id":labels.length + 1, "name":"name", "xMin":'xMin', "xMax":'xMax', "yMin":'yMin', "yMax":'yMax'});

console.log(labels);

How can i append in javascript?

2 Answers2