2

I'm making an application where the user fills out all the information for a logo and adds it to a list where he can then add more logos or delete them. Imagine I add a logo to the list with the following information:

Name: Pepsi
Location: Front, Back
Dimensions: 90mm, 60mm
Colors: Red, Blue, White
Options: Whitebg
Comment: This is a cool logo.

The array would be:

logos[logo[name, loc[], dim[], col[], opt[], com]]

Now I can do this to retrieve some info:

logos[0][0] //Prints "Pepsi"
logos[0][1][0] //Prints "Front"
logos[0][2][1] //Prints "60mm"

Now comes the problem. Whenever the user completes all the info and adds the logo the list I want to empty all the arrays except the main "logos" one so the user can add another logo to the list.

I tried to empty the "logo" array at the end of the "add" button function:

logo.length = 0;

But now the main array "logos" contains one "logo" array witch is empty. I want to keep that information there.

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • except the main "logos" one... except what? – Šime Vidas Mar 24 '11 at 02:45
  • I corrected some things on the description. – elclanrs Mar 24 '11 at 02:47
  • I want to keep all the information into the main "logos" array but whenever the user adds another logo I have to empty all the other arrays. – elclanrs Mar 24 '11 at 02:49
  • all the other arrays.... what other arrays? – Šime Vidas Mar 24 '11 at 02:51
  • After you click "add" and the current logo is added into the list, the "logos" array has 1 item (logos[logo[]]), the "logo" array witch contains all the options for the logo you just added should be emptied after it's been added to the "logos" array so you can add another logo. This is hard to explain. Let me do a quick example. I'll post it here in a while – elclanrs Mar 24 '11 at 02:56

3 Answers3

9

I think you could look at this differently. I think you should just have a main logos array. And a Logo Object.

The Logo Object.

function Logo(name,loc, dim, col, opt, com){
    return {
      name:name,
      loc:loc,
      dim:dim,
      col:col,
      opt:opt,
      com:com
    }


}


var logos = [];
logos.push(Logo("blah",somthing[],else[]....);

Then reference by:

   logos[0].name;
   logos[0].dimensions[0];

....

you can add another...

 logos.push(Logo("another",....));

Another Option

Same thing as before.

But instead of a Logos[] Use a Logos = {} object.

You can dynamically add properties by given input like this.

Logos["First"] = Logo(loc,dim,col,opt,com);
Logos["Second"] = Logo(loc2,dim2,col2,opt2,com2);

If the user inputs that they want the "First" logo.

You can use

var firstlogo = Logos["first"];

firstlogo.loc[0] etc.

Play around with it, using objects provides a better understanding of the data you are dealing with, esp when multidimensional arrays are not "required"

Community
  • 1
  • 1
Bodman
  • 7,938
  • 3
  • 29
  • 34
  • This looks like a better way to do this. My main concern is that I need to be able to know how many locations has the user specified because later on I have to use that number in an operation. Plus I need to know the location strings based on an index. For example, loc["Front", "Left"], n = 2, first location = "Front" – elclanrs Mar 24 '11 at 03:11
  • Hmm I dont think i fully understand what you mean. You will retrieve an array from the user? will the array look like loc["Front","Left"]? – Bodman Mar 24 '11 at 03:17
  • Thank you for your answers I'm trying different options playing with objects instead of arrays. Arrays were driving me crazy, this makes more sense...I will post the results here once I get it working. – elclanrs Mar 24 '11 at 03:42
  • It works! now I just have to figure out a couple more things but the basics work and it's much simpler than the arrays. – elclanrs Mar 24 '11 at 04:25
  • thats good!, Ya your now experiencing the best part of javascript. – Bodman Mar 24 '11 at 18:02
0

I think you want do this :

var tempLogo = new Array();
tempLogo[0] = logos[0]; // or the logo you have choose

// Clear the logo
logos.clear();

// Set the logos with the tempLogo value
logos = tempLogo;
Patrick Perron
  • 13
  • 1
  • 2
0

Finally I used objects instead of arrays as "Bodman" suggested. Works much better and is simpler.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/master.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>

    <form action="/" method="post" id="form">
        <p><label for="">Name:</label><input type="text" id="name"/></p>
        <p><label for="">Location:</label><input type="checkbox" name="loc" value="Front"/> Front <input type="checkbox" name="loc" value="Back"/> Back <input type="checkbox" name="loc" value="Right"/> Right <input type="checkbox" name="loc" value="Left"/> Left</p>
        <p><label for="">Dimensions:</label>H: <input type="text" size="4" id="dimH"/> W: <input type="text" size="4" id="dimW"/></p>
        <p><label for="">Colors:</label><input type="text" size="4" id="col1" /> <input type="text" size="4" id="col2" /> <input type="text" size="4" id="col3" /> <input type="text" size="4" id="col4" /></p>
        <p><label for="">Comments:</label><textarea id="com" cols="30" rows="2"></textarea></p>
        <p><label for="">&nbsp;</label><input type="button" id="add" value="Add" /> <input type="button" id="del" value="Del" /></p>
    </form>
    <ul id="results"></ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

CSS:

body { padding: 50px; }
p { margin: 10px 0; }
label { float: left; width: 100px; }
input { margin: 0 }
ul input[type="checkbox"]{ float:left; }
ul { list-style: none;}
li { margin: 10px 0; }
li div { margin-left: 20px; }
h2 { font: bold 14px Arial; margin-bottom: 5px; }

jQuery:

$(function(){

    function logo(name, loc){

        var locSize = loc.length;

        return {
            name: name,
            loc: loc,
            locSize: locSize
        }

    }


    var logos = [];

    $("#add").click(function(){
        var name = $("#name").val();
        var loc = [];
        $("input[name='loc']:checked").each(function(){
            loc.push($(this).val());
        });

        logos.push(logo(name, loc));

        $("#results").children().remove();
        $.each(logos, function(n){
            $("#results").append("<li><input type='checkbox'/><div><h2>" + logos[n].name + "<h2/> Locations(" + logos[n].locSize + "): " + logos[n].loc.join(", ") + "<div/></li>");
        });
    });

    $("#del").click(function(){
        $("#results input[type='checkbox']:checked").each(function(){
            var index = $(this).closest("li").index();
            logos.splice(index, 1);
            $(this).closest("li").remove();
        });
    });
elclanrs
  • 92,861
  • 21
  • 134
  • 171