CODEWITHSUNDEEP
javascriptarrays
Toufic Batache
Toufic Batache

Reputation: 802

Duplicate values in array cause a undefined to appear

I was making a js code that gets items from an array. One problem: items with same value return undefined or disappear. I tried many different things but nothing is working. Here is a jsfiddle : https://jsfiddle.net/76e40vqg/5/

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.3"}
];

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

Upvotes: 1

Views: 176

Answers (4)

pid
pid

Reputation: 11597

This piece of code in the JS Fiddle:

if (restoRate.indexOf(data[i].rate) === -1)
{
    restoRate.push(data[i].rate);
}

Says literally, if there is not the value 3.3, push it into restoRate. Otherwise, don't push it.

In other words, the second 3.3 is not pushed because this is what you want (have implemented) and thus for index 3 there is no value and you get undefined.

EDIT: Proposed solution which probably is insufficient

To fix it, don't check for uniqueness, just like this (without the surrounding if()):

restoRate.push(data[i].rate);

It is not clear if this is what you need further down your code, so probably you need to rethink some parts of your code. In this we cannot help you, or better it calls for another, precise question with the other code.

EDIT 2: Better solution with uniqueness

You added a check for uniqueness, so you probably still need it. The first step you must do is decide what is the key. You may want to add an id because people may have the same name but still be different people, if you get what I mean:

{"id": 45, "image":"link1","name":"Name1","address":"Address1","rate":"4.4"},
{"id": 46, "image":"link2","name":"Name1","address":"Address2","rate":"4.1"}

This example shows two entries with the same name but two completely different cases. The id is the actual key you use to distinguish entries.

If you do this, you must check for the id's uniqueness:

if (restoId.indexOf(data[i].id) === -1) // this id is new
{
    restoId.push(data[i].id);
    restoImage.push(data[i].image);
    restoName.push(data[i].name);
    restoAddress.push(data[i].address);
    restoRate.push(data[i].rate);
}

If you can't add an id you must probably go with the name, like this:

if (restoName.indexOf(data[i].name) === -1) // this id is new
{
    restoImage.push(data[i].image);
    restoName.push(data[i].name);
    restoAddress.push(data[i].address);
    restoRate.push(data[i].rate);
}

This may be, or not be what you need. Nobody can tell without actual data and full code.

Upvotes: 4

Aniruddha Das
Aniruddha Das

Reputation: 21688

You are not inserting duplicate value into your rate array if(restoRate.indexOf(data[i].rate) === -1), that is way its saying undefined in the display.

Moreover try to implement everything without making 4 new for loops. I think it can be done without creating any new array variables and iterating only the original array. The Big O will be less and performance will be good.

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

Upvotes: 0

Varun G
Varun G

Reputation: 44

I see you are purposefully avoiding duplicates by placing

if(restoRate.indexOf(data[i].rate) === -1)

If you remove this check there would be no issues displaying duplicate code.

I also thing you can add all of them together and put a check to avoid duplicate names. Like shown below :

 if(restoName.indexOf(data[i].name) === -1){
    restoName.push(data[i].name); 
    restoAddress.push(data[i].address);
    restoRate.push(data[i].rate);
    restoImage.push(data[i].image);
}

Please check this jsfiddle for implementation

Upvotes: 1

Zumry Mohamed
Zumry Mohamed

Reputation: 9558

Your code working as you have written restoRate.indexOf(data[i].rate) === -1 means your array does not contain any values. For example 

var array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

Please check the indexOf concept in javascript

Upvotes: 0

Related Questions