CODEWITHSUNDEEP
javascriptjqueryarraysloops
user3003810
user3003810

Reputation: 961

find index of object inside array of objects

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

Upvotes: 0

Views: 192

Answers (6)

Wesley Smith
Wesley Smith

Reputation: 19571

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>

Upvotes: 1

public FileResult Duser3230921
public FileResult Duser3230921

Reputation: 54

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

Upvotes: 0

Dgan
Dgan

Reputation: 10285

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/

Upvotes: 0

Naved Munshi
Naved Munshi

Reputation: 507

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

Upvotes: 0

Ziga Petek
Ziga Petek

Reputation: 4110

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

Upvotes: 0

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

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

Upvotes: 0

Related Questions