CODEWITHSUNDEEP
javascriptobjectdynamic
Xeen
Xeen

Reputation: 7003

How to make a dynamic object in JavaScript?

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.

Upvotes: 1

Views: 140

Answers (4)

Dubas
Dubas

Reputation: 2876

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.

Upvotes: 0

Sohil Desai
Sohil Desai

Reputation: 2988

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.

Upvotes: 0

trebor
trebor

Reputation: 734

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;
}

Upvotes: 0

Sandro Adamia
Sandro Adamia

Reputation: 463

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>

Upvotes: 1

Related Questions