Beginner and self-taught coder here (always open to learning please correct me) and I'm making a web app through pretty much exclusively HTML CSS and Javascript (I don't really want to use PHP or hosting-side processing because I don't know much about web security and it makes me nervous about uploading data to my hosted site).

Very unsure about the most efficient way to do this so I'm going to try to describe it below and I'd really appreciate your input.

My main question: Is there a more efficient way to do this?

The app eventually will have a javascript canvas, where it will draw an object ('track') at a specific location. This object will then move to another location based off nested data in an array ('step') when the user moves to the next item in an array.

As of now, how I'm going about it is having:

1. storing the location values in the steps array
2. have an array of 'tracks' for what shape/color/etc will be drawn on the canvas
3. linking the two elements by an arbitrary ID that is in both 'steps array' and 'tracks' array

A visual representation of what this might look like

steps[stepNumber].movedTracksInStep[movedTracksInStepNumber] holds object:
{track ID,
X location,
y location}

separate array trackList
trackList[trackNumber] holds object:
{track ID,
shape,
color,
bunchastuff}

I choose to do it like this because I figured it would be better to store the location in the steps array, store the visual data in a separate array, so that way it's not repeating the same data every step.

My question:

Is there a more efficient way to do this, especially in terms of search functions? I'm a newbie so there very well might be something I am missing.

Currently, I just have to search through all of the ID tracks in the step and see if there is a match. I'm wondering if there is a more direct way to link the two together than having to search each time.

I've thought about perhaps having all the data for the visual representation in the first step and then not having to repeat it (though I'm not quite sure how that would work), or having the numbers of arrays match up (but this would change if the user deletes a track or adds a track).

Thank you! Let me know if you need me to explain more.

CodePudding user response：

Objects in JS are stored and copied "by reference", so if you assign value of one object to another, value will not be copied, but reference link will be created. Below is the example close to your code, check inline comments. And you can adopt this behavior to your task:

// Your tracks information
const trackList = {
  1: {
    shape: "rect",
    color: "green",
    bunchastuff: "foo"
  }
};

// Your steps data
const steps = {
  1: {
    1: {
      // Here we create reference to track 1 in
      // trackList object data, without copying it
      track: trackList[1],
      x: 100,
      y: 50
    }
  }
};

// Print step info 
console.log("before track info edit:", steps[1][1].track);

// Update data in track 1
trackList[1].shape = "round";

// Print step info again and we'll
// see, that it also updated
console.log("after track info edit:", steps[1][1].track);

You can read more about object references here: https://javascript.info/object-copy