Return one instance of duplicate object values in JavaScript

Question

I'm returning information from a large API which contains duplicate object values. I have an array of program names and a function that finds an retrieves the titles I want. However, I only want them returned once rather than multiple times.

//...
var data = JSON.parse(request.responseText);
const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];

for (x in data){
  let title = data[x]._embedded.show.name;

  function getShow() 
    if (lateNightHosts.indexOf(title) !== -1){
      console.log(title)
    } 
  }

  getShow()
}

The API is large due to future schedules, so console.log returns the title multiple times. I'd like to return it once. Thanks in advance

In the function getShow(array), array is never used. What's it supposed to be for? — kshetline
– kshetline, Commented May 4, 2018 at 3:40
@kshetline My mistake. That was from a previous attempt to solve this, I've removed the parameter — miranda
– miranda, Commented May 4, 2018 at 3:41

kshetline · Accepted Answer · 2018-05-04 03:49:24Z

1

You could do something like this:

var data = JSON.parse(request.responseText);
const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];
const displayed = new Set();

for (x in data){
  let title = data[x]._embedded.show.name;

  function getShow() 
    if (lateNightHosts.indexOf(title) !== -1) {
      if (!displayed.has(title)) {
        console.log(title);
        displayed.add(title);
      }
    } 
  }

  getShow();
}

answered May 4, 2018 at 3:49

kshetline

14k6 gold badges49 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

miranda Over a year ago

Thank you! This helped a lot

miranda Over a year ago

When i use console.log() to display results, it shows the correct values. When I try to display it to HTML, it returns as [object Set] or undefined. Any solutions for this?

kshetline Over a year ago

Set objects have a forEach method, just like arrays. A quick-n-dirty solution to get all of the titles in string form would look something like this (sorry that comments don't have line breaks): const titles = []; displayed.forEach(title => titles.push(title)); Then you can use titles.join(). If you want nice formatting, this is just a rough starting point, of course.

Zhenya Telegin · Accepted Answer · 2018-05-04 03:50:43Z

You can add all titles to array and then filter it

const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];

filteredArray = lateNightHosts.filter(function(item, pos) {
    return lateNightHosts.indexOf(item) == pos;
})

console.log(filteredArray)

Also you can use Set, since it contains only unique elements and then using spread operator transform it to array

const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];

var set = new Set(lateNightHosts);
var filteredArray = [...set];
console.log(filteredArray);

dkaramazov · Accepted Answer · 2018-05-04 14:19:19Z

1

This looks like a great place to take advantage of the new ES6 Set data structure. The Set will only add unique values and has several functions on its prototype which allow you to access and mutate the data.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

let store = new Set();
for (x in data){
  store.add(data[x]._embedded.show.name);
}

This new structure is iterable, has a size property, and several handy prototype functions like has(), delete(), and clear().

let target = document.getElementById('data-target');

let set = new Set();
for(let i = 0; i < 10; i++){
    set.add(`value-${i}`);
}
let elem = '';
set.forEach((value) => {
    elem += `<div>${value}</div>`;
});

target.innerHTML = elem;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="data-target"></div>
        
</body>
</html>

edited May 4, 2018 at 14:19

answered May 4, 2018 at 4:18

dkaramazov

2042 silver badges9 bronze badges

3 Comments

miranda Over a year ago

Thanks! Set() definitely helps. When I use console.log() it shows the correct values. When I display it to HTML using javascript template literals, it returns as [object Set] or undefined. Do you know of any solutions for this?

dkaramazov Over a year ago

Could you give me an example of your implementation?

miranda Over a year ago

The updated answer actually helped out a lot. Thanks!

Collectives™ on Stack Overflow

Return one instance of duplicate object values in JavaScript

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related