What is the best way to structure a data object in Javascript or VueJs?

As I work on developing a small application using VueJs, the data I receive is structured in a particular 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":{
                ...
            }
        },
    ]
}

The data contains much more detail which I aim to structure like this:

forEach(client_association)
{
    ...
}

forEach(stellar_participants)
{
    ...
}

forEach(contacts_participants)
{
    ...
}

Ultimately, I want the final format to look something like this:

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

This consolidated format will make it easier for me to filter the data effectively. Any guidance on achieving this would be greatly appreciated. Thank you.

Answer №1

Here is a possible solution: simply use the map function to iterate through your data. This code generates an array where each element is an object representing an item in the 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":"example1@example.com",
                        "alt_email":null,
                        "address":null,
                        "city":null,
                        "state":null,
                        "country":null,
                        "profile":"Investor-Senior",
                        // More data...
                    },
                    // More associations...
                ],
                // More interactions...
            }
        },
    ]
};

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)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show the URL hash as url.com/something#/ rather than url.com/something/#/

I'm encountering a peculiar issue with my Angular v1.6.5 setup. My routes seem to be acting strangely, for example: $routeProvider .when('/', { templateUrl: 'myTemplate', controller: 'myController', method: &apo ...

Tips for successfully utilizing hyphens when passing an object property as an argument

Does anyone know how to pass an object property with a hyphen in it as an argument? I'm having trouble with this issue. Object { "section-id": 1, ... } HTML <div *ngFor="let section of sections" (trackScrollLeave)="leave(section.sectio ...

Exploring the process of linking multiple checkbox fields in a form with an ajax request

I have attempted the following method, but it is not working. I am able to retrieve the name from the form, but nothing gets assigned to the "sharewith" variable. My goal is to assign all selected checkboxes to one id called "sharewith" and then send them ...

`The universal functionality of body background blur is inconsistent and needs improvement.`

I've developed a modal that blurs the background when the modal window is opened. It's functioning flawlessly with one set of HTML codes, but encountering issues with another set of HTML codes (which seems odd considering the identical CSS and Ja ...

Populate DataTables with data from JSON or JavaScript arrays and objects

Using jQuery(html), I was populating a table with data but now I am attempting to limit the displayed rows by switching the table to datatables. The data structure looks like this: dataArray = [{ id: 1, props: { abc: 123, def: 456 ...

Utilize ES6 lodash to map the keys of an object fetched from an API

Currently, I am utilizing Vue 3 to send POST data to my API. The structure of the objects is as follows: const externalResults: ref(null) const resource = ref({ id: null, name: null, state: {} }) Prior to sending the data to the API, I am modifying ...

Adding HTML attributes to a VueJS table allows for more customization and control

Is it possible to incorporate HTML/Bootstrap elements into a cell in VueJS? <b-table striped show-empty :items="filtered"> <template slot="top-row" slot-scope="{ fields }"> <td v-for="field in fields& ...

Tips for closing print window dialog during Protractor testing

Currently, I am performing end-to-end testing using protractor. During a specific test, I need to verify if the print button is successfully creating a PDF. When the test clicks on the button, it triggers a print window dialog as shown below: https://i.st ...

Error: Undefined object while trying to access 'injection' property

After updating to React 16.x, I encountered the following error: Uncaught TypeError: Cannot read property 'injection' of undefined at injectTapEventPlugin (injectTapEventPlugin.js:23) at eval (index.js:53) at Object.<anonymous> ...

Combining two objects in AngularJS to create a new merged object

Is there a way to merge object1 and object2 into object3, updating values corresponding to matching keys while ignoring unmatching keys? var object1 = { "pii" : "val1", "loc" : "val2" } var object2 = { "rrb" : "val3", "voc" : "val4" } var obje ...

Steps for passing a Javascript variable through POST method and then redirecting to a different page

I am facing an issue with sending a JavaScript variable via POST to a PHP page and displaying the new page. Despite checking the variable using Wireshark and confirming that it is sent correctly (key and value), the new page does not show anything. $(docu ...

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

User must wait for 10 seconds before closing a JavaScript alert

Can a JavaScript alert be set to stay open for a certain amount of time, preventing the user from closing it immediately? I would like to trigger an alert that remains on screen for a set number of seconds before the user can dismiss it. ...

What are some ways to maintain code efficiency when working with AJAX requests?

Looking at the code below, I am making two identical Ajax requests with only one line of difference. Is there a way to consolidate this into a function to maintain DRY (Don't Repeat Yourself) code? $('.searchable').multiSelect({ selecta ...

The error message "this.props.navigation" is not defined and cannot be evaluated as an object

Recently, I encountered an issue with my navigation system. Within my application, there are 3 screens or components that I navigate between using react-navigation. The first screen prompts the user to enter their mobile phone number and password, which is ...

Bootstrap5: Left-aligned Navigation Bar Pills and Right-aligned Text

I am trying to align all my navigation pills to the left, and then add a single text element that stays at the end of the navbar even when the page is resized. Navbar Image My attempt involved adding a div so that the navbar pills would take up 50% width ...

"Debugging a simple demonstration showcasing NodeJS, AngularJS, and Express

Currently, I am following an online tutorial to learn a new concept. I have reached the part where I need to display data using HTTP GET from the controller, while the sample data is stored in the server file. I managed to fetch the data from the controlle ...

Unleashing the power of dynamic column width in Material UI Grid

Is it possible to dynamically change the column width for grid items within the same container in material UI grid? Sometimes I have 2 grid items that need to display in the same row, and other times I have 4 grid items that I want to appear in the same r ...

Incorporating React into an already existing webpage and accessing URL parameters within a .js file

Following the official guidelines: To include React in a website, visit https://reactjs.org/docs/add-react-to-a-website.html I have created a file named test.html with the following content: <!DOCTYPE html> <html> <head> < ...

What is the best way to retrieve information from a webpage I have created using an express backend and an HTML frontend

I designed a login page named index.html that prompts users to enter their email and password, followed by a submit button with the label "Log In": <input type="submit" value="Log In" id="loginbutton"> Within my app.js ...