Jquery multidimensional arrays

Question

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.

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
– elclanrs, Commented Mar 24, 2011 at 2:49
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
– elclanrs, Commented Mar 24, 2011 at 2:56

Community · Accepted Answer · 2020-06-20 09:12:55Z

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"

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 24, 2011 at 3:05

Bodman

8,0863 gold badges31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

elclanrs Over a year ago

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"

Bodman Over a year ago

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"]?

elclanrs Over a year ago

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 Over a year ago

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.

Bodman Over a year ago

thats good!, Ya your now experiencing the best part of javascript.

Patrick Perron · Accepted Answer · 2011-03-24 02:47:32Z

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;

answered Mar 24, 2011 at 2:47

Patrick Perron

131 silver badge2 bronze badges

Comments

elclanrs · Accepted Answer · 2011-03-24 04:28:41Z

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

Collectives™ on Stack Overflow

Jquery multidimensional arrays

3 Answers 3

The Logo Object.

Another Option

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The Logo Object.

Another Option

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related