How to make a dynamic object in JavaScript?

Question

I have these types of objects:

var users = {
  1: {name: "John Smith", description: "CEO Of Google", image: "None"}
  2: {name: "Elizabeth II", description: "Queen of England", image: "None"}
}

and I need to add some more values to it through user input using an html form

    Title <input type="text" name="title" id="title_text" />
    Description <input type="text" name="description" id="description_text" />
    Image <input type="text" name="image" id="image_text" />
    <input type="submit" value="Ok" name="add_member"onClick="arrayAdd()" />

Can any of you please point me to how the JS backend for this kind of operation would look like?

Thanks.

Tip: Create a collection (array of objects) instead of an object with numbers as index because objects are not guaranteed to be in order. — elclanrs
– elclanrs, Commented Sep 16, 2013 at 6:26

Sandro Adamia · Accepted Answer · 2013-09-16 06:41:31Z

here is a working example: http://jsbin.com/OpOMOsA/1/edit open a console window in chrome and u will see new values in users array.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script>
var users = [
  {name: "John Smith", description: "CEO Of Google", image: "None"},
  {name: "Elizabeth II", description: "Queen of England", image: "None"}
];


function arrayAdd()
{

  var title_text =$("#title_text").val();
  var description_text =$("#description_text").val();
  var image_text =$("#image_text").val();

  users.push({name:title_text,description:description_text,image:image_text});
  console.log(users);
}    
  </script>
</head>
<body>
      Title <input type="text" placeholder="Scott Aasrud" name="title" id="title_text" />
    Description <input type="text" placeholder="VP, Public sector" name="description" id="description_text" />
    Image <input type="text" placeholder="http://example.com/image.jpg" name="image" id="image_text" />
    <input type="submit" value="Ok" name="add_member"onClick="return arrayAdd();" />
</body>
</html>

trebor · Accepted Answer · 2013-09-16 06:42:16Z

0

http://jsfiddle.net/4Gyqk/

Include jQuery library and try code below:

var users = {}, i = 0;
function arrayAdd() {
   users[i] = {
       "name":$("#title_text").value(),
       "description":$("#description_text").value(),
       "image":$("#image_text").value()
   };
   ++i;
}

or:

var users = {}, i = 0;
function arrayAdd() {
   users[i] = {
       "name":document.getElementById("title_text").value,
       "description":document.getElementById("description_text").value,
       "image":document.getElementById("image_text").value
   };
   ++i;
}

answered Sep 16, 2013 at 6:42

trebor

7445 silver badges16 bronze badges

Comments

Sohil Desai · Accepted Answer · 2013-09-16 06:45:29Z

0

if you are creating indexes in object then you should use array it would be easy for you.

declare users as array like

var users = [];

and just use .push() method to insert object in array. like

var tempObj = {
   "name":$("#title_text").value(),
   "description":$("#description_text").value(),
   "image":$("#image_text").value()
};
users.push(tempObj);

so the users array will look like something this

[
   {name: "John Smith", description: "CEO Of Google", image: "None"},
   {name: "Elizabeth II", description: "Queen of England", image: "None"}
]

this will make easy for you it will automatically handle indexes.

answered Sep 16, 2013 at 6:45

Sohil Desai

2,9845 gold badges26 silver badges36 bronze badges

Comments

Dubas · Accepted Answer · 2013-09-16 06:54:40Z

You need a Colletion to perform this. Your Object is not a collection.

First you need to change it to something like:

var users = [
  {name: "John Smith", description: "CEO Of Google", image: "None"},
  {name: "Elizabeth II", description: "Queen of England", image: "None"}
];

This is a collection of Objects that can be processed.

Next you should use JS to create an object retrive the data and add it with "push" function.

I make and example using JQuery Javascript framework to retrive form data and make the click handler. Also this can be done using only Javascript

HTML:

Title <input type="text" name="title" id="title_text" /><br/>
Description <input type="text" name="description" id="description_text" /><br/>
Image <input type="text" name="image" id="image_text" /><br/>
<input id="add_button" type="button" value="Ok"  /><br/>

Javascript:

var users = [
  {name: "John Smith", description: "CEO Of Google", image: "None"},
  {name: "Elizabeth II", description: "Queen of England", image: "None"}
];

$('#add_button').click(function(){
    var nam = $('#title_text').val();
    var des = $('#description_text').val();
    var img  = $('#image_text').val();

    var row = {name: nam, description: des, image: img};
    users.push(row);
    console.dir(users);    
});

** I use "console.dir(users)" in Google Chrome or Firefox to help viewing in JS console the resulting object.

Collectives™ on Stack Overflow

How to make a dynamic object in JavaScript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related