Nitish Kumar
Reputation: 6286
How format data object in Javascript or VueJs
I'm trying to build small application in VueJs where I'm receiving data in following format:
{
"interactions":[
{
"id":14,
"user_id":1,
"schedule":"2017-06-04 05:02:12",
"type":"Meeting",
"with_client":0,
"event_type":"2",
"venue":"Mumbai",
"created_at":"2017-06-04 07:15:37",
"updated_at":"2017-06-04 07:15:37",
"deleted_at":null,
"meeting":{
"id":14,
"user_id":1,
"schedule":"2017-06-04 05:02:12",
"type":"Meeting",
"with_client":0,
"event_type":"2",
"venue":"Mumbai",
"created_at":"2017-06-04 07:15:37",
"updated_at":"2017-06-04 07:15:37",
"deleted_at":null,
"clients_association":[
{
"id":4,
"company_id":8,
"salutation":"Mr",
"first_name":"Check 2",
"last_name":"Contact",
"number":"098765",
"email":"[email protected]",
"alt_email":null,
"address":null,
"city":null,
"state":null,
"country":null,
"profile":"Investor-Senior",
"sectors_interested":"[\"Financial Services\",\"Metals & Mining\",\"Real Estate\",\"Cement\"]",
"companies_interested":"[9]",
"created_at":"2017-06-03 06:29:38",
"updated_at":"2017-06-03 06:29:38",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":4
}
},
{
"id":5,
"company_id":9,
"salutation":"Ms",
"first_name":"Ammy",
"last_name":"Contact",
"number":null,
"email":"[email protected]",
"alt_email":null,
"address":null,
"city":null,
"state":null,
"country":null,
"profile":"Company-Promoter",
"sectors_interested":"[\"Pharmaceuticals\",\"Infrastructure\",\"Metals & Mining\",\"Auto\",\"Auto Ancillaries\",\"Real Estate\",\"Telecoms\",\"Capital Goods\"]",
"companies_interested":"[7]",
"created_at":"2017-06-03 06:30:50",
"updated_at":"2017-06-03 06:30:50",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":5
}
}
],
"contacts_association":[
{
"id":2,
"company_id":5,
"salutation":"Mr",
"first_name":"Check",
"last_name":"Contact",
"number":"234567890",
"email":"[email protected]",
"alt_email":null,
"address":"Thane",
"city":"Thane",
"state":"Maharastra",
"country":"India",
"profile":"Research-Corporate Access",
"sectors_interested":"[\"Infrastructure\",\"Financial Services\",\"Capital Goods\",\"Pharmaceuticals\",\"Real Estate\"]",
"companies_interested":"[7]",
"created_at":"2017-06-02 19:32:30",
"updated_at":"2017-06-02 19:32:30",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":2
}
},
{
"id":3,
"company_id":4,
"salutation":"Mr",
"first_name":"Check 1",
"last_name":"Contact",
"number":null,
"email":"[email protected]",
"alt_email":null,
"address":null,
"city":null,
"state":null,
"country":null,
"profile":"Investor-Research Head",
"sectors_interested":"[\"Economics\",\"Real Estate\",\"Auto\",\"Consumer\",\"Logistics\",\"Oil & Gas\",\"Industrial\",\"Capital Goods\"]",
"companies_interested":"[8]",
"created_at":"2017-06-03 06:28:03",
"updated_at":"2017-06-03 06:28:03",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":3
}
},
],
"stellar_participants":[
{
"id":1,
"name":"Analyst",
"email":"[email protected]",
"address":null,
"city":null,
"state":null,
"country":null,
"role":"Analyst",
"supervisor_id":null,
"created_at":null,
"updated_at":null,
"deleted_at":null,
"pivot":{
"interaction_id":14,
"user_id":1
}
}
]
}
},
]
}
There are lot more information which is being received I want to have it in a format something like this:
forEach(client_association)
{
if(this.client_name == null)
{
this.client_name = client_association.first_name+ ' '+client.assciation.last_name
}
else
{
this.client_name = this.client_name + ', ' + client_association.first_name+ ' '+client_association.last_name
}
}
forEach(stellar_participants)
{
if(this.stellar_participants_name == null)
{
this.stellar_participants_name = stellar_participants.name
}
else
{
this.stellar_participants_name = this.stellar_participants_name + ', ' + stellar_participants.name
}
}
forEach(contacts_participants)
{
if(this.contacts_participants_name == null)
{
this.contacts_participants_name = contacts_participants.first_name + ' ' + contacts_participants.last_name
}
else
{
this.contacts_participants_name = contacts_participants.first_name + ' ' + contacts_participants.last_name
}
}
So my final format will be:
meeting_date = 2017-06-04 05:02:12 //Schedule
meeting_call = Meeting //type
event_type = 2 //event_type
venue = Mumbai //venue
with_client = 0
stellar_participants = Analyst //stellarParticipants
clients_association = Check 2 Contact, Ammy Contact //adding all the names in clients association
contacts_association = Check Contact, Check 1 Contact //adding all the names in contacts association
so that it takes it into one variable and it gets easier while filtering the data. Please guide me how to achieve this. Thanks
Upvotes: 0
Views: 150
Answers (1)
Egor Stambakio
Reputation: 18156
Possible solution: just straightforward map through your data. This code creates an array where each element is an object representing one element in interactions array:
var a = {
"interactions":[
{
"id":14,
"user_id":1,
"schedule":"2017-06-04 05:02:12",
"type":"Meeting",
"with_client":0,
"event_type":"2",
"venue":"Mumbai",
"created_at":"2017-06-04 07:15:37",
"updated_at":"2017-06-04 07:15:37",
"deleted_at":null,
"meeting":{
"id":14,
"user_id":1,
"schedule":"2017-06-04 05:02:12",
"type":"Meeting",
"with_client":0,
"event_type":"2",
"venue":"Mumbai",
"created_at":"2017-06-04 07:15:37",
"updated_at":"2017-06-04 07:15:37",
"deleted_at":null,
"clients_association":[
{
"id":4,
"company_id":8,
"salutation":"Mr",
"first_name":"Check 2",
"last_name":"Contact",
"number":"098765",
"email":"[email protected]",
"alt_email":null,
"address":null,
"city":null,
"state":null,
"country":null,
"profile":"Investor-Senior",
"sectors_interested":"[\"Financial Services\",\"Metals & Mining\",\"Real Estate\",\"Cement\"]",
"companies_interested":"[9]",
"created_at":"2017-06-03 06:29:38",
"updated_at":"2017-06-03 06:29:38",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":4
}
},
{
"id":5,
"company_id":9,
"salutation":"Ms",
"first_name":"Ammy",
"last_name":"Contact",
"number":null,
"email":"[email protected]",
"alt_email":null,
"address":null,
"city":null,
"state":null,
"country":null,
"profile":"Company-Promoter",
"sectors_interested":"[\"Pharmaceuticals\",\"Infrastructure\",\"Metals & Mining\",\"Auto\",\"Auto Ancillaries\",\"Real Estate\",\"Telecoms\",\"Capital Goods\"]",
"companies_interested":"[7]",
"created_at":"2017-06-03 06:30:50",
"updated_at":"2017-06-03 06:30:50",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":5
}
}
],
"contacts_association":[
{
"id":2,
"company_id":5,
"salutation":"Mr",
"first_name":"Check",
"last_name":"Contact",
"number":"234567890",
"email":"[email protected]",
"alt_email":null,
"address":"Thane",
"city":"Thane",
"state":"Maharastra",
"country":"India",
"profile":"Research-Corporate Access",
"sectors_interested":"[\"Infrastructure\",\"Financial Services\",\"Capital Goods\",\"Pharmaceuticals\",\"Real Estate\"]",
"companies_interested":"[7]",
"created_at":"2017-06-02 19:32:30",
"updated_at":"2017-06-02 19:32:30",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":2
}
},
{
"id":3,
"company_id":4,
"salutation":"Mr",
"first_name":"Check 1",
"last_name":"Contact",
"number":null,
"email":"[email protected]",
"alt_email":null,
"address":null,
"city":null,
"state":null,
"country":null,
"profile":"Investor-Research Head",
"sectors_interested":"[\"Economics\",\"Real Estate\",\"Auto\",\"Consumer\",\"Logistics\",\"Oil & Gas\",\"Industrial\",\"Capital Goods\"]",
"companies_interested":"[8]",
"created_at":"2017-06-03 06:28:03",
"updated_at":"2017-06-03 06:28:03",
"deleted_at":null,
"pivot":{
"interaction_id":14,
"contact_id":3
}
},
],
"stellar_participants":[
{
"id":1,
"name":"Analyst",
"email":"[email protected]",
"address":null,
"city":null,
"state":null,
"country":null,
"role":"Analyst",
"supervisor_id":null,
"created_at":null,
"updated_at":null,
"deleted_at":null,
"pivot":{
"interaction_id":14,
"user_id":1
}
}
]
}
},
]
};
var res = a.interactions.map(i => Object.assign({
'meeting_date': i.schedule,
'meeting_call': i.type,
'event_type': i.event_type,
'venue': i.venue,
'with_client': i.with_client
}, {
'stellar_participants': i.meeting.stellar_participants.map(sp => sp.name).join(', ')
}, {
'clients_association': i.meeting.clients_association.map(ca => ca.first_name + ' ' + ca.last_name).join(', ')
}, {
'contacts_association': i.meeting.contacts_association.map(ca => ca.first_name + ' ' + ca.last_name).join(', ')
}));
console.log(res)Upvotes: 3
Related Questions
- Methods of formatting a Vuex object value
- Using Vuejs how do i display data from object and not array
- Add formatter function to json data received from REST API on bootstrapvue
- Formatting dynamic html content...ex: {{foobar.data}}
- How to set JS object as data object from VueJS?
- Reformat JSON object
- Vue + Vuex: format input data
- How to format fetched data in Vue.js and update the vue instance
- How to format an Array of Arrays of Object in JS
- how to change type array object to format object without looping method in vue.js?