Json array creation using javascript / jquery

Question

User Details

 var UserDetails=[{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}]

Call Details

var CallSummary=[{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}]

Expected Result

var Result=[{"UserId":1,"Name":"Vineeth","UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"Name":"Sreena","UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}]

How to get this result, my code is ,

var UserDetails=[{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}]
var CallSummary=[{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}]
var UserSummary = [];
$.each(UserDetails, function(key, index) {
 $.each(CallSummary, function(key, index1) {
 if (index.UserId == index1.UserId) {
 UserSummary.push({
 UserId: index.UserId
 });
 UserSummary.push({
 Name: index.Name
 });
 UserSummary.push({
 TotalPerCalls: index1.UPerCalls
 });
 UserSummary.push({
 TotalCallTime: index1.UTotalCallTime
 });
 UserSummary.push({
 TotalPerCallTime: index1.UPerCallsTime
 });
 UserSummary.push({
 TotalAvgCallTime: index1.UAvgCallTime
 });
 }
 })
})
console.log(UserSummary);

How to solve this ???

Thank you

• SLePort: Possible duplicate of JS - Merge two array of objects based on a key
• sjd: And may be this link

Answer 1

You only need an iteration. By doing .map you loop through the Users and for each user, create a new object in the UserSummary array. Then inside that object you 'spread' the properties of both the UserDetails object corresponding to that user and the properties of CallSummary.

var UserDetails=[{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}];
var CallSummary=[{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}];
var UserSummary=UserDetails.map((user, index) => ({...user, ...CallSummary[index]}));
console.log(UserSummary);

• JIJOMON K.A: can you please show the full code. I see only ....... var UserSummary=UserDetails.map((user, index) => ({...user, ...CallSummary[index]}))

Answer 2

Just use Object.assign({}, index, index1) which return combined result of index and index1.

var UserDetails=[{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}]
var CallSummary=[{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}]
var UserSummary = [];
$.each(UserDetails, function(key, index) {
 $.each(CallSummary, function(key, index1) {
 if (index.UserId == index1.UserId) {
 UserSummary.push(Object.assign({}, index, index1));
 }
 })
})
console.log(UserSummary);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Please try the below code :) You need to assign the values to a temporary object and then push the object into the array.

var UserDetails=[{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}];
var CallSummary=[{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}];
UserSummary=[];
 $.each(UserDetails, function(key, index) {
 $.each(CallSummary, function(key, index1) {
 if(index.UserId==index1.UserId){
 var tempObject = {};
 tempObject['UserId'] = index.UserId;
 tempObject['Name'] = index.Name;
 tempObject['TotalCalls'] = index1.TotalCalls;
 tempObject['TotalPerCalls'] = index1.UPerCalls;
 tempObject['TotalCallTime'] = index1.UTotalCallTime;
 tempObject['TotalPerCallTime'] = index1.UPerCallsTime;
 tempObject['TotalAvgCallTime'] = index1.UAvgCallTime;
 UserSummary.push(tempObject);
 }
 })
 })
 console.log(UserSummary);

Answer 4

You can use native functions like .concat(), .reduce() and Object.assign() to get this:

var UserDetails = [{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}];
var CallSummary = [{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}];
var result = Object.values(
 UserDetails
 .concat(CallSummary)
 .reduce((r, c) => (r[c["UserId"]] = Object.assign({}, r[c["UserId"]], c), r), [])
 );
 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

References:

• Array.prototype.concat()
• Array.prototype.reduce()
• Object.values()
• Object.assign()

• JIJOMON K.A: Uncaught TypeError: UserDetails.concat(...).reduce is not a function
• Mohammad Usman: @JIJOMONK.A Can you create some fiddle of your code?
• JIJOMON K.A: sorry bro its a mistake, can you please edit the answer. I will change it

Answer 5

You need to do follow the steps like:

1. Loop the UserDetails array to get each object in that array
2. Then find the object in CallSummary array with matching UserId value
3. Merge the object if the UserId is same using Object.assign()
4. Push the new object in the array UserSummary

var UserDetails=[{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}];
var CallSummary=[{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}];
var UserSummary = [];
UserDetails.forEach((userDetail) => {
 var callSummary = CallSummary.find(({UserId})=> UserId === userDetail.UserId);
 var newObj = Object.assign(userDetail, callSummary);
 UserSummary.push(newObj);
});
console.log(UserSummary);

• JIJOMON K.A: How to find a specific user data from this second array
• Ankit Agarwal: It is there. You need to use find()
• JIJOMON K.A: I have only second array and a value, no two arrays

Answer 6

It's Pretty simple: please write the logic as below

var UserDetails=[{"UserId":1,"Name":"Vineeth"},{"UserId":2,"Name":"Sreena"}];
var CallSummary=[{"UserId":1,"UPerCalls":"22 %","UTotalCallTime":"60:24 minutes","UPerCallsTime":"0 %","UAvgCallTime":"0:22 minutes"},{"UserId":2,"UPerCalls":"8 %","UTotalCallTime":"50373:16 minutes","UPerCallsTime":"50 %","UAvgCallTime":"839:33 minutes"}]
var array3 = CallSummary.filter(function(obj) { return UserDetails.indexOf(obj.UserId) == -1; });
console.log(array3);

Please see in here

• Samrat Saha: Not Same as Expected Result :)
• Cata John: console.log() must be lowerCase:)
• saumil_: It works fine please check the link and paste given code. then click on run. also compare your expected result