find index of object inside array of objects

Question

I have an array of objects which generated from list of an items from HTML, I faced a problem in dealing with the array to get index of item and the length of the array, always gets Zero.

I want both data-id and value (list 1,2,3 ..).

HTML Code

<ul class="list">
    <li data-id="l1">list 1</li>
    <li data-id="l2">list 2</li>
    <li data-id="l3">list 3</li>
    <li data-id="l4">list 4</li>
</ul>
<p></p>

JS Code

var arr = new Array();

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr[lid] = lval;
});

$('p').html('array length = ' + arr.length + ' & index of list 1 is ' + arr.indexOf('l1'));

I'm new in javascript and jQuery i don't know if i have errors with syntax . check out this fiddle please

Wesley Smith · Answer 1 · 2015-01-10T10:28:04.933

Try using arr.push(lval); instead:

You are trying to use l1 as the index where you want to add your data but l1 is a string and the index must be a number. .push() will add the given element as the last element in the given array, probably more what you are looking for.

Since you want both the data-id and the element's html, create a multidimensional array by doing arr.push( [lid, lval] )

var arr = new Array();

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr.push( [lid, lval] );
});

$('p').html('array length = ' + arr.length + ' & index of list 1 is ' + getIndexOfK(arr, 'l1'));


// access values like 
for(var i = 0; i < arr.length; i++){
  
  $('#myDiv').append( 'this element\'s data-id= '+ arr[i][0] +'------ this element\'s html= ' + arr[i][1]+'<br>' );
}






// function to get index of given element in a multidemensional array
// you may not actually need this, it was jsut to get your idex 
// credit: http://stackoverflow.com/questions/16102263/to-find-index-of-multidimensional-array-in-javascript
function getIndexOfK(arr, k){
    for(var i=0; i<arr.length; i++){
        var index = arr[i].indexOf(k);
        if (index > -1){
            return [i, index];
        }
    }
    return -1;
}

#myDiv{
  margin-top:50px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="list">
    <li data-id="l1">list 1</li>
    <li data-id="l2">list 2</li>
    <li data-id="l3">list 3</li>
    <li data-id="l4">list 4</li>
</ul>
<p></p>

<div id="myDiv"></div>

but what if i need the key or id is the value of data-id ! to use it later as an identify — user3003810, Jan 10 '15 at 09:53

Ziga Petek · Answer 2 · 2015-01-10T09:47:52.167

You are using your new Array as an object. In Javascript arrays only have numeric indexes. After your loop finishes, you basically have an object.That's why length returns 0.

Change your code to:

var arr = new Array();

var counter = 0;

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr[lid] = lval;
    counter++;
});

$('p').html('array length = ' + counter + ' & index of list 1 is l1');

And you'll know what I mean. The index already is 'l1', there is no numeric part.

EDIT:

Here is a JSFiddle of the changed code. You think you get something like this:

 ['list 1','list 2','list 3','list 4']

but you actually get something like this:

{ 'l1':'list 1', 'l2':'list 2', 'l3':'list 3', 'l4':'list 4' }

Dgan · Answer 3 · 2015-01-10T09:58:17.640

0

try this

Using push you can add elements to Array and in indexOf you need to Pass lid to Your Array

var arr = new Array();

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr.push(lid);
});

$('p').html('array length = ' + arr.length + 
' & index of list 1 is ' + arr.indexOf('l1'));

JS Fiddle http://jsfiddle.net/0vfgnoav/

edited Jan 10 '15 at 09:58

answered Jan 10 '15 at 09:41

Dgan

10,077
1
29
51

what about value of 'l1' ? – user3003810 Jan 10 '15 at 09:55
@user3003810 check the fiddle – Dgan Jan 10 '15 at 09:58
the list value not included in the array, for example if I write arr[0] or arr['l1'], are the same, it should type 'list 1' !. @Ganesh_Devlekar – user3003810 Jan 10 '15 at 10:04

score 0 · Answer 4 · answered Jan 10 '15 at 09:43

Try this

var arr = new array();

var counter =0;
$('.list li').each(function(){
    var dataid= $(this).attr('data-id');
    var getvalue = $(this).html();
    arr[dataid] = getvalue ;
    counter++;
});

$('p').html('array length = ' + counter + ' & index of list 1 is l1');

score 0 · Answer 5 · answered Jan 10 '15 at 09:49

You can try this jsFiddle

   var arr = new Array();
   var i = 0;
   $('.list li').each(function(){
      var lid = $(this).attr('data-id');
      var lval = $(this).html();
      arr[i] = lval;
      i++;
   });

  $('p').html('array length = ' + arr.length + ' & index of list 1 is ' + arr.indexOf('list 1'));

score 0 · Accepted Answer · answered Jan 10 '15 at 10:17

Try this code its working.

var arr ={};

$('.list li').each(function(){    
    arr[$(this).attr('data-id')]=$(this).html();
});

function find(ar, val){
var i=0;
$.each(ar, function (key, data) {
      if(data==val)
      {
         return false;
      }
    i++;
});
    return i;
};
$('p').html('array length = ' + Object.keys(arr).length  + ' & index of list 1 is '+find(arr, "list 2"));

find index of object inside array of objects

6 Answers6