CODEWITHSUNDEEP
javascriptjqueryarrays
elclanrs
elclanrs

Reputation: 94101

Jquery multidimensional arrays

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.

Upvotes: 1

Views: 21588

Answers (3)

elclanrs
elclanrs

Reputation: 94101

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

Upvotes: 0

Bodman
Bodman

Reputation: 8046

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"

Upvotes: 9

Patrick Perron
Patrick Perron

Reputation: 13

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;

Upvotes: 0

Related Questions