JavaScript need a way to clean up JSON.Stringify without modifying a helper function

Question

Working on an assignment. I am using .filter() to find a list of active members. Following the instructions of the assignment the output is very messy. I would like to only display the member names or the member _ids.

This is the helper function and I cannot modify this function. As a rule of the assignment.

const printKata = function (kataNumber, object) {
    const detailsElement = document.createElement("details");
    main.append(detailsElement);

    const summaryElement = document.createElement("summary");
    summaryElement.append("KATA " + kataNumber);
    detailsElement.append(summaryElement);

    const stringifiedObject = JSON.stringify(object);
    detailsElement.append(stringifiedObject);

...

Here is an example of the user object

const users = [
  {
    _id: "5efb83d333dadb00fc5f68e4",
    isActive: true,
    balance: "$2,967.17",
    picture: "http://placehold.it/32x32",
    age: 21,
    eyeColor: "green",
    name: "Gregory Villarreal",
    company: "BLUPLANET",
    email: "[email protected]",
    phone: "[phone]",
    registered: "Friday, May 24, 2019 3:08 PM",
    tags: ["quis", "irure", "consequat", "ut", "occaecat"],
  }

...

And here is the simple function to filter the data.

let userActive = users.filter(function (user) {
    return user.isActive === true;
});

...

Currently it is displaying all the data from the entire object. I think it would look a lot nicer to only display the name and or id ..

I am very new to all of this. Please be patient with me.

Answer 1

Currently it is displaying all the data from the entire object. I think it would look a lot nicer to only display the name and or id ..

To do that, Use map just after your filter method, to specify only fields you want from objects and not all of them.

const users = [{
      _id: "5efb83d333dadb00fc5f68e4",
      isActive: true,
      balance: "$2,967.17",
      picture: "http://placehold.it/32x32",
      age: 21,
      eyeColor: "green",
      name: "Gregory Villarreal",
      company: "BLUPLANET",
      email: "[email protected]",
      phone: "[phone]",
      registered: "Friday, May 24, 2019 3:08 PM",
      tags: ["quis", "irure", "consequat", "ut", "occaecat"],
    }]

    let userActive = users.filter(function(user) {
      return user.isActive === true;
    }).map(({id,name})=>({id,name}));
    console.log(userActive)

Answer 2

This function is returning what you are asking from it:

let userActive = users.filter(function (user) {
    return user.isActive === true;
});

"Filter the users array and return the user where isActive is true."

The return is the user object (or users if there is more than one) with all the key/value pairs.

As suggested in the previous answer, you can chain the map method at the end and return the values you want.