Creating a function that will get multiple shapes from nested array that have coordinates of each shape

HannahR10 0
Viewed 32

I am currently trying to make a Javascript function that will iterate through an array that represents 1 or more shapes in a nested array and each of these nested arrays could have a variable number of coordinates to create these shapes. At the bottom I have started the beginning of what this function could look like, but having trouble thinking out the logic.

Ex:

//This is a single 'shape' with 3 points
var coordsingle = [[1,1],[2,2],[3,3]];
//This one has 3 'shapes'
var coordmultiple = [[[1,1],[2,2],[3,3]],[[4,4],[5,5],[6,6],[7,7],[8,8]],[[-1,-1], [-2,-2],[-3,-3],[-4,-2],[-7,-3]]];

output:
coordsingle = 1 shape
1 - coordinates [1,1],[2,2],[3,3]

coordmultiple = 3 shapes
1 - coordinates [1,1],[2,2],[3,3]
2 - coordinates [4,4],[5,5],[6,6],[7,7],[8,8]
3 - coordinates [-1,-1], [-2,-2],[-3,-3],[-4,-2],[-7,-3] 

function extractCoordinates(shapeArray){
  let shapecount = data.length; 
  if(shapecount < 2){
   
   document.write("<br>"," The Shape count is ",shapecount,"<br>");
   document.write("<br>"," The amount of Coords ",data[0][0].length,"<br>");
   document.write("<br>",data,"<br>");

  }
  else{
// this only outputs the first nested arrays set of coordinates 
  for(var coordpairs of shapecount){
    document.write("<br>"," The Shape count is ",shapecount,"<br>");
    document.write("<br>"," The amount of Coords ",data[0][0].length,"<br>");
    document.write("<br>",data,"<br>");
  }

}
nested arrays javascript
1 Answers

So it seems to me that there are a few things going on here. First, you want to be able to take a single shape in, and output some information about that shape. OR you might get an array of shapes in, and be able to output that same "single-shape" information for each of those shapes.

It is do-able, but the approach is a little different. First, consider defining the function to handle a single shape array:

const displayShapeInfo = (arr) => {
  return `--------------------------
  The number of endpoints is ${arr.length}
  those endpoints: [${arr.join('],[')}]`;
}

This is simply outputting the value as a string, but we could tell that function to return DOM elements, or return whatever. The point is, this function takes in an array like [[1,1],[2,2],[3,3]] and outputs something like:

-------------------------------------
  The number of endpoints is 3
  those endpoints: [1,1],[2,2],[3,3]

It takes in a 2-deep array, and outputs information for that array.

In the event of an array of shape-arrays, we have a 3-deep array. From the root, the furthest in we can go is three arrays: the main array (outermost), the shape (mid-level), and the point (innermost). So how can we apply our single-shape-handling function in that case?

In that case, we simply want to say this:

const displayShapes = (arrayOfShapes) => {
  let info = []
  for(let i=0; i<arrayOfShapes.length; i++){
    info.push( displayShapeInfo(arrayOfShapes[i]) );
  }
  return info;
}

That one takes a three-deep array, and applies our function to each two-deep array within the top level. And yes, for those who look for completeness, this could be done with arrayOfShapes.map(displayShapeInfo), but that might be confusing.

And the next bit will be confusing enough. See, we still don't know if we are dealing with a two-level-deep array, or a three-level-deep array. We need to getArrayDepth somehow, telling us the maximum depth of this array. That will determine which way we want to go.

So a little googling for finding array depth in javascript showed me this one:

const getArrayDepth = (arr) => {
  // if arr is an array, recurse over it
  return Array.isArray(arr) ?
    1 + Math.max(...arr.map(getArrayDepth)) : 
    0; // otherwise, it's 0
}

That function starts from the outermost array and, if it is an array, runs this same function on each of its children, adding 1 for each recursive call. It will, in short, tell us the maximum depth of each nested array.

If we know that, we can then handle both cases:

const displayShapeInfo = (arr) => {
  return `--------------------------
  The number of endpoints is ${arr.length}
  those endpoints: [${arr.join('],[')}]`;
}

const displayShapes = (arr) => {
  switch(getArrayDepth(arr)){
    case 2:
      // if this is a two-deep array, it is a *shape* array.
      return displayShapeInfo(arr);
    case 3:
      // if it's three-deep, it is an *array of shape arrays*.
      let info = [];
      for(let i=0; i<arrayOfShapes.length; i++){
        info.push( displayShapeInfo(arrayOfShapes[i]) );
      }
      return info;
    default:
      // *anything else*, we haven't specified how to handle
      return 'Unknown shapes array';
  }
}

To see this working, https://replit.com/@TobiasParent/arraysOfShapes#index.js

Snowmonkey0
Related