Merge Multiple Array by keys - Angular 5, Typescript

Question

My question is about typescript and not javascript. I want to merge multiple arrays by key(id). For Example: I have these one to many relations arrays

Student Array 1 :

[ { "Case ID":12, "Student name":"john", "address":"Ohio" }, { "Case ID":13, "Student name":"David", "address":"new york" } ]

Courses Array 2 :

[ { "id":34343, "Case ID":12, "course":"algorithm", "Grade":"A" }, { "id":343434, "Case ID":12, "course":"advanced c++", "Grade":"B" } ]

I want to get this array which has keys from both array1 and array 2 :

`[
    { 
        "Case ID":12,
        "name":"john", 
        "Courses":[{"course":"algorithm",
        "Grade":"A",},
         {"course":"advanced c++",
         "Grade":"B"}]

    }
]`

Possible duplicate of (https://stackoverflow.com/q/35903850/9775003) — Sanoj_V, Aug 03 '18 at 05:35
Only one of your arrays has objects with an `id` key. That makes it a little hard to understand what you want to do. — Mark, Aug 03 '18 at 05:50
Possible duplicate of [Combine json arrays by key, javascript](https://stackoverflow.com/questions/35903850/combine-json-arrays-by-key-javascript) — stealththeninja, Aug 03 '18 at 05:56
@JohnyAli what you want seems to be weired there multiple keys like `"course"` and `"Grade"` so you can change it to `"course": ["algorithm", "advanced c++"]` and `"Grade": ["A", "B"]` in my opinion. This could be easier for binding in html. — Sanoj_V, Aug 03 '18 at 06:01

score 0 · Answer 1 · edited Aug 03 '18 at 17:43

_.groupBy() lodash will do that job, you can have any property you want to group by your array.

var arr = [
    {
        "name": "xyz",
        "age": 22,
        "add": "street 5"
    },
    {
        "name": "fjf",
        "age": 22,
        "add": "street 6"
    }
];

console.log(_.groupBy(arr, 'name'));

/** result:
{
    "xyz": [
        {
            "name": "xyz",
            "age": 22,
            "add": "street 5"
        }
    ],
    "fjf": [
        {
            "name": "fjf",
            "age": 22,
            "add": "street 6"
        }
    ]
} **/

score 0 · Accepted Answer · answered Aug 03 '18 at 06:23

0

@JohnyAli, you don't want get the object that you propouse (they have a repeted key). You want to get

{ Sid:..,name:..,courses:[{Grade:..course:..},{Grade:..course:..}]

So use map

const data=this.students.map(x=>{
    //witch each element of students
    return {  //an element that have
        Sid:x.Sid,  //property Sid equal property Sid of element
        name:x.name,   //idem with name
        courses:this.courses.filter(c=>c.Sid==x.Sid)  //the variable courses
                                       //was the courses where 
                                       //Sid was equal the Sid of element
    })

answered Aug 03 '18 at 06:23

Eliseo

50,109
4
29
67

if i have case id instead of Sid it doesn't take after the space ? – Johny Ali Aug 03 '18 at 06:31
@JohnyAli, do you understand the use of map? (an clear example you can see in e.g. http://adripofjavascript.com/blog/drips/transforming-arrays-with-array-map.html) – Eliseo Aug 03 '18 at 06:55
no i understood what you said but in my real example i have Case id instead of Sid so this method can't handle the space between (Case id) what you suggest me to do ? – Johny Ali Aug 03 '18 at 06:58
Please, edit your question showing what do you want to get. The question is wrong because you can not have an object with duplicate properties (in your example you have two "course" and two "Grade") – Eliseo Aug 03 '18 at 07:21
yes sorry i didn't notice this... now you can check it – Johny Ali Aug 03 '18 at 07:31
Insert line `"Case ID": x["Case ID"],` above the `name:x.name`. – Giacomo Voß Aug 03 '18 at 08:07
In general, give a property a name include spaces or others specials character, is not a good idea. Anyway try, as Guiacomo say, replace "Case ID": x["Case ID"] and c.Sid==x.Sid by c["Case ID"]==x["Case ID"] – Eliseo Aug 03 '18 at 08:19
Man sorry but if i have another json object like instructors and have same id (SID) and i want to merge with data that i have merged above how will look like – Johny Ali Aug 03 '18 at 13:15

score -1 · Answer 3 · answered Aug 03 '18 at 05:49

-1

You can use lodash

and do the merge opeartion on both the arrays to a destination array.

answered Aug 03 '18 at 05:49

Vaibhav

1,481
13
17

Jumping to suggest a library increases payload and misses the features already present in the language (e.g. Array.prototype.reduce()). – stealththeninja Aug 03 '18 at 05:53
@stealththeninja it is not about jumping on to the library, its about performance as well. I think you might miss understood the native vs lodash – Deepender Sharma Aug 03 '18 at 05:57

Merge Multiple Array by keys - Angular 5, Typescript

3 Answers3