Exploring the use of arrays in Vue JS

Currently, I am working on a small project using VueJS 2.0, and it involves handling data that looks like this:

{"data":
    [
        {
            "id":8,
            "salutation":"Mr",
            "first_name":"Madhu",
            "last_name":"Kela",
            "number":"2343253455",
            "mobile":"3252345435",
            "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82efe3e6eaf7c2f0e7eeebe3ece1e7efe4ace1edef">[email protected]</a>",
            "alt_email":null,
            "address":"Mumbai BKC",
            "city":"Mumbai",
            "state":null,
            "country":"India",
            "profile":null,
            "sectors_interested":"[\"Insurance\",\"Infrastructure\",\"Information Technology\",\"hevy machines\",\"Healtcare\"]",
            "companies_interested":"[4]",
            "interactions_count":11,
            "client_interactions_count":0,
            "company":[
                {
                    "id":7,
                    "name":"Reliance MF",
                    "address":"Mumbai BKC",
                    "city":"Mumbai",
                    "state":null,
                    "country":"India",
                    "type":"Investor",
                    "sub_type":"Mutual Fund",
                    "is_client":0,
                    "pivot":{
                        "contact_id":8,
                        "company_id":7,
                        "created_at":"2017-07-01 17:07:08",
                        "updated_at":"2017-07-01 17:07:08"
                    }
                }
            ]
        },
        {
            "id":7,
            "salutation":"Ms",
            "first_name":"XYZ",
            "last_name":"ABC",
            "number":"1847171087",
            "mobile":"8327523057",
            "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="becdd5dcd5d4d9dbccdcccdffedadfdcd8d2c8dad4d890ddd1d3">[email protected]</a>",
            "alt_email":null,
            "address":"Mumbai",
            "city":"Mumbai",
            "state":null,
            "country":"India",
            "profile":null,
            "sectors_interested":"[\"Insurance\",\"Information Technology\",\"Infrastructure\",\"hevy machines\"]",
            "companies_interested":"[6,4]",
            "interactions_count":8,
            "client_interactions_count":0,
            "company":[
                {
                    "id":3,
                    "name":"Franklin Fun",
                    "address":"Mumbai",
                    "city":"Mumbai",
                    "state":null,
                    "country":"India",
                    "type":"Investor",
                    "sub_type":"Mutual Fund",
                    "is_client":0,
                    "pivot":{
                        "contact_id":7,
                        "company_id":3,
                        "created_at":"2017-07-01 16:59:41",
                        "updated_at":"2017-07-01 16:59:41"
                    }
                }
            ]
        }
    ]
}

I have a requirement to transform this data into another format, which should look like this:

return this.model.map(d => ({
    name: d.first_name + ' ' +d.last_name,
    company: d.company[0].name,
    email: d.email,
    mobile: d.mobile,
    profile: d.profile,
    count: d.interactions_count ? d.interactions_count : d.client_interactions_count
}))

One key aspect is that if the interactions_count value is 0, then it should be replaced with the client_interactions_count. Additionally, I am facing some challenges in extracting the company name from the initial array parameter and sorting the output based on the count field in descending order as per the response received. Any assistance or guidance on how to achieve this would be greatly appreciated. Thank you.

javascriptecmascript-6vue.jsvuejs2

Answer №1

const info = [
    {
        "id":8,
        "salutation":"Mr",
        "first_name":"Madhu",
        "last_name":"Kela",
        "number":"2343253455",
        "mobile":"3252345435",
        "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec3cfcac6dbeedccbc2c7cfc0cdcbc3c880cdc1c3">[email protected]</a>",
        "alt_email":null,
        "address":"Mumbai BKC",
        "city":"Mumbai",
        "state":null,
        "country":"India",
        "profile":null,
        "sectors_interested":"[\"Insurance\",\"Infrastructure\",\"Information Technology\",\"hevy machines\",\"Healtcare\"]",
        "companies_interested":"[4]",
        "interactions_count":11,
        "client_interactions_count":0,
        "company":[
            {
                "id":7,
                "name":"Reliance MF",
                "address":"Mumbai BKC",
                "city":"Mumbai",
                "state":null,
                "country":"India",
                "type":"Investor",
                "sub_type":"Mutual Fund",
                "is_client":0,
                "pivot":{
                    "contact_id":8,
                    "company_id":7,
                    "created_at":"2017-07-01 17:07:08",
                    "updated_at":"2017-07-01 17:07:08"
                }
            }
        ]
    },
    {
        "id":7,
        "salutation":"Ms",
        "first_name":"XYZ",
        "last_name":"ABC",
        "number":"1847171087",
        "mobile":"8327523057",
        "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a19010801000d0f1808180b2a0e0b080c061c0e000c44090507">[email protected]</a>",
        "alt_email":null,
        "address":"Mumbai",
        "city":"Mumbai",
        "state":null,
        "country":"India",
        "profile":null,
        "sectors_interested":"[\"Insurance\",\"Information Technology\",\"Infrastructure\",\"hevy machines\"]",
        "companies_interested":"[6,4]",
        "interactions_count":8,
        "client_interactions_count":0,
        "company":[
            {
                "id":3,
                "name":"Franklin Fun",
                "address":"Mumbai",
                "city":"Mumbai",
                "state":null,
                "country":"India",
                "type":"Investor",
                "sub_type":"Mutual Fund",
                "is_client":0,
                "pivot":{
                    "contact_id":7,
                    "company_id":3,
                    "created_at":"2017-07-01 16:59:41",
                    "updated_at":"2017-07-01 16:59:41"
                }
            }
        ]
    }
];

const details = info.map((item) => {
  return {
    name: item.first_name + ' ' + item.last_name,
    company: item.company[0].name,
    email: item.email,
    mobile: item.mobile,
    profile: item.profile,
    count: item.interactions_count ? item.interactions_count : item.client_interactions_count
  };
}).sort((a, b) => b.count - a.count); 

console.log(details);

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

"Utilize the parent component's functionality by extending/inheriting it

export default function PageTemplate() { return ( <div className="layout"> <LeftMenu /> <div className="content"> <TopMenu /> <div id="other-contents"> ...

javascriptreactjsinheritancenext.jssingle-page-application

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

javascriptjqueryhtmluser-input

The correct pattern must not be matched by ng-pattern

Within the ng-pattern attribute, we can define a specific pattern for a field to match. Is there a way to indicate that the field should NOT match the specified pattern? For instance: <input type="text" ng-pattern="/[*|\":<>[\]{}`()&a ...

javascriptangularjsregexangularjs-ng-pattern

Tips for implementing jQuery overlay to display radio buttons in a popup window

Following a tutorial, I created an alert window with radio buttons added for user input. You can view the online demo here. The modified source code with the radio buttons is provided below. Below you'll find where I added the radio buttons and how I ...

javascriptphpjqueryhtmlmodal-dialog

Is there a way to activate an event when using # or @ in a text field on React/Next.js?

I'm in the process of starting a new project and I am thinking about how to incorporate this into react/nextjs. I want to create a user selection or hashtag selection dialog around the textarea, but I haven't been able to find any helpful article ...

javascriptreactjsnext.jsdraftjs

Player using unexpected options instead of Video.js options

I have created a basic HTML page with a small JavaScript snippet to function as a playlist, and it was working perfectly fine. However, when I integrated Video.js into the mix, an issue arose. Sometimes, upon reopening the page, the player fails to load p ...

javascripthtmlcachingvideo.js

What is the best way to output a received HTML page from the server?

I'm currently working on printing an HTML page that was generated using Node.js on my server. After sending the page to the client side as a response to an AJAX request, I have stored it in a JavaScript variable. var resp_json = printRequest.getRespo ...

javascripthtmlajaxnode.js

Having trouble with Socket.io sending data to a specific socketId?

I'm currently using Socket.Io 1.7.3 with Angular 2, connecting to a ExpressJS Server. I'm facing an issue where I am unable to send packages to a specific socket ID even though they are a match. Server code snippet: socket.on('subscribeNot ...

javascriptangularexpresssocket.io

Display a button only when hovering over it

Seeking assistance for a simple task that is eluding me at the moment. I am currently using scss and trying to make a button only appear when hovered over. The button is hidden in the code snippet below, nested within a block alongside some svgs. Any hel ...

javascripthtmlangularsass

JavaScript library that provides SQL-like functionality for easily manipulating arrays

After successfully parsing a csv file into an array of objects, I find myself in need of making multiple alterations to that array. Currently, I am utilizing lodash methods for this task, but I am finding it to be quite verbose. I am considering working wi ...

sqljavascript

Tips for sending a state into the gtm.js function?

As an intern at a startup, I am the sole front-end developer responsible for coding a website in Next.js. My boss has requested that I incorporate Google Tag Manager into the project. Following the example provided by Next on their GitHub page, I have succ ...

javascriptreactjsfunctionnext.jsgoogle-tag-manager

Implementing event listeners with AngularJS after making a POST request

As I delve into the world of development, please forgive my lack of knowledge. My search for solutions brought me here. I am currently working on a comment and reply app. In order to add comments to my view, I am utilizing this specific function. $scope.i ...

javascriptangularjs

A Greasemonkey script for organizing and categorizing webpage elements

I've been working on a script to enhance the functionality of Facebook's find friends page by organizing suggested friends based on mutual connections. If you're interested in checking out the code, you can find it right here: http://pasteb ...

javascriptjqueryfacebookgreasemonkey

Passing a property to a click event handler in ES6 with React: What's the best approach?

Struggling with passing props to a click function in my React learning journey. I'm attempting to make a basic ES6 counter component that increases when a button is clicked. The click function I have so far is: click() { this.setState({ c ...

javascriptreactjs

When the width of the window is hidden, conceal

My webpage has a carousel with pictures, but on smaller devices, they do not appear properly. I am now trying to figure out how to hide the div if the width is less than 1015px. Here is the code for my div: <html> <body> <div id="myCarou ...

javascriptjqueryhtmlcsstwitter-bootstrap

jQuery: automatic submission on pressing enter compared to the browser's autocomplete feature

Here is a JavaScript code snippet that automatically submits the form when the user presses the "enter" key: jQuery.fn.installDefaultButton = function() { $('form input, form select').live('keypress', function(e) { if ((e.which && ...

javascriptjquerybrowserautocompletesubmit

NPM - Include in package.json without installation

Can a command be executed to validate that the package is a legitimate npm package, include it as a dependency in package.json, but refrain from actually installing it? This question arises from the need to utilize a specific package globally and incorpor ...

javascriptjsonnode.jsnpmnpm-install

Performing an AJAX request from a subfolder

Can anyone help me figure out how to make an ajax request from a page located in a subdirectory and receive a response? On my webpage, index.jsp is situated within a subdirectory called /vf2. In this page, there is a script file included: <script src=" ...

javascriptajaxjsprequest

Preventing Broken URLs in Jquery each

What is the best way to prevent taking images with broken URLs? jQuery.each(jQuery('img'), function(index, obj) { imageStack.add(jQuery(obj)); }); ...

javascriptjquery

Sending a message to an iframe from a different origin using JavaScript

Just starting out with JavaScript and I'm attempting to send a message to my iframe in order to scroll it. Here is the code I am using: scroll(i) { var src = $("#iframe").attr("src"); $("#iframe").contentWindow.postMe ...

javascriptangulargoogle-chromeiframe