Get index of an object inside of an array with JS

Question

I was making a js code that gets objects from an array. I just want to have a script that takes the object index and prints it on the html page. I tried many different things but nothing is working. For example, let's say that first {} is 0, then the second one with rate 3.3 is 1... Here is a jsfiddle : https://jsfiddle.net/76e40vqg/1/

var data = [{"image":"link1","name":"Name1","address":"Address1","rate":"4.4"},{"image":"link2","name":"Name2","address":"Address2","rate":"3.3"},{"image":"link3","name":"Name3","address":"Address3","rate":"3.2"}
];
var restoName = [];
for(i = 0; i < data.length; i++){    
    if(restoName.indexOf(data[i].name) === -1){
        restoName.push(data[i].name);        
    }        
}

var restoAddress = [];
for(i = 0; i < data.length; i++){    
    if(restoAddress.indexOf(data[i].address) === -1){
        restoAddress.push(data[i].address);        
    }        
}

var restoRate = [];
for(i = 0; i < data.length; i++){    
    if(restoRate.indexOf(data[i].rate) === -1){
        restoRate.push(data[i].rate);        
    }        
}

var restoImage = [];
for(i = 0; i < data.length; i++){    
    if(restoImage.indexOf(data[i].image) === -1){
        restoImage.push(data[i].image);
    }        
}

for(i = 0; i < restoName.length; i++){
document.getElementById('output').innerHTML += "Image : <a href='" + restoImage[i] + "'><div class='thumb' style='background-image:" + 'url("' + restoImage[i] + '");' + "'></div></a><br>" + "Name : " + restoName[i] + "<br>" + "Address : " + restoAddress[i] + "<br>" + "Rate : " + restoRate[i] + "<br>" + "Index" + "<br><hr>";
  }

Thank you

There's no JSON above. JSON is a *textual notation* for data exchange. [(More)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Oct 08 '16 at 11:56
http://stackoverflow.com/questions/15997879/get-the-index-of-the-object-inside-an-array-matching-a-condition — Deepak, Oct 08 '16 at 12:03
I tried this before asking the question. I have 3 elements {thing1}, {thing2}, {thing3}. The first one should have index 0, thing2 should have index 1 and thing 3 should have index 2 — Toufic Batache, Oct 08 '16 at 12:06
I think you are missing `..."Index" + i +"
...` https://jsfiddle.net/76e40vqg/4/ — Luigi Cerone, Oct 08 '16 at 12:06

score 1 · Accepted Answer · answered Oct 08 '16 at 12:11

1

I think you are missing ..."Index" + i +"<br>...

https://jsfiddle.net/76e40vqg/4/

@Nina Scholz 's solution is working too.

answered Oct 08 '16 at 12:11

Luigi Cerone

362
1
6
18

Thank you both so much, but I can't accept 2 answers. – Toufic Batache Oct 08 '16 at 12:13
Don't worry , @Nina Scholz is better! :) It is clean code. – Luigi Cerone Oct 08 '16 at 12:16
You too are good. You know that it worked first with your comment not Nina. If you want I can accept yours as it's the one which help. – Toufic Batache Oct 08 '16 at 12:18
Do what you think it's better to do :) Have a nice day! – Luigi Cerone Oct 08 '16 at 12:31
Thanks. Have a nice day too – Toufic Batache Oct 08 '16 at 13:35

Nina Scholz · Answer 2 · 2016-10-08T12:08:14.623

You could use just a single loop for showing the data with Array#forEach.

The forEach() method executes a provided function once per array element.

var data = [{ image: "link1", name: "Name1", address: "Address1", rate: "4.4" }, { image: "link2", name: "Name2", address: "Address2", rate: "3.3" }, { image: "link3", name: "Name3", address: "Address3", rate: "3.2" }];

data.forEach(function (object, index){
    console.log('index', index);
    console.log('image', object.image);
    console.log('name', object.name);
    console.log('address', object.address);
    console.log('rate', object.rate);
    console.log('--');
});

Traditional with for loop and an index i.

var data = [{ image: "link1", name: "Name1", address: "Address1", rate: "4.4" }, { image: "link2", name: "Name2", address: "Address2", rate: "3.3" }, { image: "link3", name: "Name3", address: "Address3", rate: "3.2" }],
    i;

for (i = 0; i < data.length; i++) {
    console.log('index', i);
    console.log('image', data[i].image);
    console.log('name', data[i].name);
    console.log('address', data[i].address);
    console.log('rate', data[i].rate);
    console.log('--');
}

This does't show me the index of each element. It just gets the elements and prints them. — Toufic Batache, Oct 08 '16 at 12:04
It doesn't seem to work could you edit my fiddle so I see how it works? Thanks — Toufic Batache, Oct 08 '16 at 12:07
view [here](https://jsfiddle.net/76e40vqg/2/) for index, just add `i` for the output. — Nina Scholz, Oct 08 '16 at 12:10
Yeah, i was the solution, at first it was index, index. The second code is the one working... Thanks — Toufic Batache, Oct 08 '16 at 12:11

Get index of an object inside of an array with JS

2 Answers2