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

Answer 1

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> 

Answer 2

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' }

Answer 3

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/

Answer 4

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');

Answer 5

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'));

Answer 6

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"));