Home Ask Login Register

Developers Planet

Your answer is one click away!

Sandi February 2016

Creating multiple arrays with different names in Javascript

Trying to make a little chat program, I am currently using a click function to create new containers (new channels to chat in) and add them to my HTML page.

I want to add an array (the whitelist) to every container I create and name it in a way so that I can call it later, but the number of containers isn't limited so I'll have to do it with a variable or something.

I'm currently using one array for all of the containers; The code snippet:

i = 0;
$('#newroom').click(function () {
   chatroom = {};
   chatroom.whitelist = [];
   //making every whitelist unique here
   //here i am creating all the other stuff

I want to call the whitelist later like

document.getElementById('chatroom.whitelist' + i)

or something similar, I just want to differ between the them to get the names stored in one specific whitelist.

I don't know if there's a more simple way for this since I'm new to Javascript but I sure do hope you'll help me.


apxp February 2016

Your model does not need a unique id for every whitelist. Because you add your whitelist to the chatroom.

On the other side your code is not working when you want to do document.getElementById('chatroom.whitelist' + i)

Because with every click you want to add a new chatroom. After 10 clicks you have 10 chatrooms. If you want to select the 3rd chatroom, what are you going to do? So the id needs to be on the chatroom:

chatrooms = [];

$('#newroom').click(function () {
   chatroom = {};
   chatroom.whitelist = [];
   id = chatrooms.length;
//select 3rd chatroom
chatr = chatrooms[2];
//get the whitelist
wl = chatr.whitelist;

RomanPerekhrest February 2016

Consider the following simple approach:
Let's say we have a main container for chat rooms with id="chatroom" and a customized button with id="newroom". On every #newroom click we can add a unique block for every 'whitelist'.
html part:

<div id="chatroom"></div>
<div id="newroom">Add new room</div>

js part:

var counter = 0;

$('#newroom').click(function () {
   //making every whitelist unique here
   $('#chatroom').append("<div id='whitelist"+ counter +"'></div>");


// now you can access certain `whitelist` element by id:
var members = $("#whitelist3").text();  // exemplary case

Manan Joshi February 2016

As far as is can understand you want to create sublists within the whitelist. One suggestion would be why don't you create properties within whitelist, these properties could be named after the distinguishable criteria that identifies each whitelist and then the value of all these properties could be your array of names.

It could be something like

chatroom = {};
$('#newroom').click(function () {
   chatroom.whitelist.distinctPropertyOne = [];
   chatroom.whitelist.distinctPropertyOne.push = 'name1';

Now you can access your separate whitelists using chatroom.whitelist.distinctPropertyOne

Hope this helps.


Post Status

Asked in February 2016
Viewed 2,650 times
Voted 10
Answered 3 times


Leave an answer

Quote of the day: live life