CODEWITHSUNDEEP
javascript
Dustin
Dustin

Reputation: 147

How do I get the index of an array of arrays?

I am trying to get the indexOf an array of arrays, but I keep coming up with result of -1 in the alert. Can anyone tell me what Im doing wrong here?

Ive already tried the nextcubetype as an array using nextcubetypearray, same result. 

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="cube Dirt1"></div>
  <div class="cube Dirt2"></div>
  <div class="cube Dirt3"></div>

  <script>
    var Dirt1 = new Object();
    Dirt1.Name = 'Dirt1';
    Dirt1.Level = '1';

    var Dirt2 = new Object();
    Dirt2.Name = 'Dirt2';
    Dirt2.Level = '1';

    var Dirt3 = new Object();
    Dirt3.Name = 'Dirt3';
    Dirt3.Level = '2';

    var terrain = new Array(Dirt1, Dirt2, Dirt3);

    $(".cube").each(function(index) {
      var thiscubetype = $(this).attr('class').split(' ')[1];
      var nextcubetype = $(this).next().attr('class').split(' ')[1];
      var nextcubetypearray = new Array(nextcubetype);

      var nextcubeindex = terrain.indexOf(nextcubetype);
      alert(nextcubeindex);
    });
    
  </script>
</body>

I need the index of the terrain array that contains the nextcubetype

Upvotes: 0

Views: 204

Answers (3)

adiga
adiga

Reputation: 35222

indexOf returns index of an element in an array. nextcubetype is just a string but terrain is an array of objects. So, you can use findIndex.

(This will fail for the last element because there $(this).next().attr('class') will be undefined. So, you need to handle it separately)

var Dirt1 = {
   Name: 'Dirt1',
   Level: '1'
}
var Dirt2 = {
   Name: 'Dirt2',
   Level: '1'
}
var Dirt3 = {
   Name: 'Dirt3',
   Level: '2'
}

var terrain = new Array(Dirt1, Dirt2, Dirt3);

$(".cube").each(function(index) {
  var thiscubetype = $(this).attr('class').split(' ')[1];
  var nextcubetype = $(this).next().attr('class').split(' ')[1];
  var nextcubetypearray = new Array(nextcubetype);

  var nextcubeindex = terrain.findIndex(t => t.Name === nextcubetype);

  alert(nextcubeindex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cube Dirt1"></div>
<div class="cube Dirt2"></div>
<div class="cube Dirt3"></div>

Also, you can create object literals using {} instead of using Object constructor.

Upvotes: 0

Uma
Uma

Reputation: 846

You are looking for an index in an Array of Objects, but using an object property as a criterion.

Try to get an array of names and then find index, as in this example:

var nextcubeindex = terrain.map(n => n.Name).indexOf(nextcubetype);

Upvotes: 1

ControlAltDel
ControlAltDel

Reputation: 35011

You need to convert the classname into the object:

var thiscubetype = $(this).attr('class').split(' ')[1];
var nextcubetype = $(this).next().attr('class').split(' ')[1];
var nextcubetypearray = new Array(nextcubetype);
//convert string to the Dirt object
var nextcubetypeObj = nextcubetype == "Dirt1" ? Dirt1 : nextcubetype == "Dirt2" ? Dirt2 : Dirt3;

var nextcubeindex = terrain.indexOf(nextcubetypeObj);

Another way to do this is to create an object to do the mapping

var mapping = {
  "Dirt1" : Dirt1,
  "Dirt2" : Dirt2,
  "Dirt3" : Dirt3
}

and then mapping[nextcubetype] to get the Dirt object

Upvotes: 0

Related Questions