Angular map to use Object

Question

I am working on some code I am unfamiliar with.

I have a data set that looks like this:

[
 {"id": 1, "person_name": "joe", "parent_id": "1ax"}
 {"id": 2, "person_name": "jane", "parent_id": "5t6"}
 {"id": 3, "person_name": "john", "parent_id": "a88"}
]

Originally the code has this line:

const values = this.data.map((d) => d.person_name).sort();

and then this:

groups = Object.values(
            values.reduce((a, c) => {
                (a[c] || (a[c] = { name: c, rcount: 0 })).rcount += 1;
                return a;
            }, {})
        ).sort(({ rcount: ac }, { rcount: bc }) => bc - ac);

This all results in something like this:

[
 {name: "joe", rcount: 1},
 {name: "jane", rcount: 1},
 {name: "john", rcount: 1}
]

I'd like to include the parent_id in the final output too but can't figure out how.

I've tried a number of things in the .map() section but none have yet worked.

I tried this for example:

const values = this.data.map((d) => d.person_name, d.parent_id).sort();

Is there a way I can map to an object and then reference the person_name and the parent_id from values when doing the reduce?

Note that the code is counting unique instances of person_name in the list. If you add parent_id, you may get different values if a person_name exists twice in the list (in which case it would have shown up as { name: "name", rcount: 2 }), but with different parent_ids (in which case it may show up as { name: "name", parent_id: "1ax", rcount: 1 }, { name: "name", parent_id: 5t6, rcount: 1 })... — Heretic Monkey
– Heretic Monkey, Commented Aug 7, 2020 at 12:21

Namysh · Accepted Answer · 2020-08-07 12:55:01Z

Does this solves the answer ?

const data = [{
    "id": 1,
    "person_name": "joe",
    "parent_id": "1ax"
}, {
    "id": 2,
    "person_name": "jane",
    "parent_id": "5t6"
}, {
    "id": 3,
    "person_name": "john",
    "parent_id": "a88"
}];

/* OLD */
// const values = this.data.map((d) => d.person_name).sort();
// looks like ['joe', 'jane', ...string]

/* NEW */
const values = data.map((d) => ({ name: d.person_name, parent_id: d.parent_id })).sort();
// looks like [{ name : 'joe', parent_id : '1ax' }, { name : 'jane', parent_id : '5t6' }, ...object]

// https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduce
const groups = Object.values(
    values.reduce((a, c) => {
    // the parameter 'a' is the accumulator
    // the parameter 'c' is the current element in array
    // since the array does longer contains strings but objects and we need a string as array index, we use the object name property like 'object.property' => 'c.name'
        (a[c.name] || (a[c.name] = {
            name: c.name,
            rcount: 0,
            // we add the property parent_id
            parent_id: c.parent_id
        })).rcount += 1;
        return a;
    }, {})
).sort(({
    rcount: ac
}, {
    rcount: bc
}) => bc - ac);

console.log(groups);

Answers which explain code are voted up more often than down...
I'll edit my answer and explain it, I just wanted to be sure that it solves the problem
very clear, thanks! I will now incorporate what @HereticMonkey said about the count too
You can use c.name + c.parent_id as a key, instead of c.name, it will probably solves this problem. With that, only same name and same parent_id will increments rcount.

Dharman · Accepted Answer · 2020-08-07 12:28:23Z

1

Map the 2 items you want to show to an array:

data = [
    { "id": 1, "person_name": "joe", "parent_id": "1ax" },
    { "id": 2, "person_name": "jane", "parent_id": "5t6" },
    { "id": 3, "person_name": "john", "parent_id": "a88" }
]
const values = data.map((d) => [d.parent_id,d.person_name]).sort();
groups = Object.values(
    values.reduce((a, c) => {
        (a[c] || (a[c] = { name: c[1], id:c[0], rcount: 0 })).rcount += 1;
        return a;
    }, {})
).sort(({ rcount: ac }, { rcount: bc }) => bc - ac);

console.log(groups)

edited Aug 7, 2020 at 12:28

Dharman♦

33.9k27 gold badges103 silver badges156 bronze badges

answered Aug 7, 2020 at 12:22

Schwarz54

1,0141 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular map to use Object

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related