Ways to minimize the occurrence of duplicate values in a table

In the application, I have a table where I add multiple values to an Array. These arrays display the values in the table columns, sometimes resulting in duplicate values. Below is a small example to illustrate the issue.

What is the best way to eliminate duplicate values in the ColumnValue Arrays?

    methods: {
    caseFileDetailedTableData(row) {
console.log(row=
      return [
        {
          columnName: I18n.t('ccenter.case_file.table.total_debt_outstanding'),
          columnValue: row.totalDebtOutstanding
        },
        {
          columnName: I18n.t('ccenter.case_file.table.company_names'),
          columnValue: row.debtorInfo.companyNames.join(', ') || '-'
        },
        {
          columnName: I18n.t('ccenter.case_file.table.aliases'),
          columnValue: row.debtorInfo.aliases.join(', ') || '-'
        },
        {
          columnName: I18n.t('ccenter.case_file.table.birthdates'),
          columnValue: row.debtorInfo.birthdates.join(', ') || '-'
        },
        {
          columnName: I18n.t('ccenter.case_file.table.phones'),
          columnValue: row.debtorInfo.phones.join(', ') || '-'
        },
        {
          columnName: I18n.t('ccenter.case_file.table.emails'),
          columnValue: row.debtorInfo.emails.join(', ') || '-'
        },
        {
          columnName: I18n.t('ccenter.case_file.table.addresses'),
          columnValue: row.debtorInfo.addresses.join(', ') || '-',
        },
        {
          columnName: I18n.t('ccenter.case_file.table.customer_numbers'),
          columnValue: row.debtorInfo.customerNumbers.join(', ') || '-'
        },
        {
          columnName: I18n.t('ccenter.case_file.table.contract_numbers'),
          columnValue: row.contractNumbers.join(', ') || '-'
        },
        {
          columnName: I18n.t('ccenter.case_file.table.invoice_numbers'),
          columnValue: row.invoiceNumbers.join(', ') || '-'
        },
      ]
    }
  }
}

Previously Used Methods:

     fields.forEach(field => {
            if (participant[field.fieldName].length > 0) {
              const uniqueValues = [];
              const uniqueElements = [];
              participant[field.fieldName].forEach(element => {
                if (!uniqueValues.includes(element.value)) {
                  uniqueValues.push(element.value);
                  uniqueElements.push(element);
                }


...

    removeDuplicateValues(p){
    return Object.keys(p).map(k => Array.isArray(p[k]) ? { [k]: removeDuplicates(p[k]) } : { [k]: p[k] }).reduce((acc, item) => ({...acc, ...item}), {});
    },

    removeDuplicates(arr){
    return [...new Set(arr)];
    console.log(arr)
    },

EDIT: Example of Repetition Cited:

Date of birth   1982-12-18
Phone numbers   354, 3541914408, 3541914408, 3541914408

Answer №1

From my understanding, a function like this could help remove duplicates:

const removeDuplicates = (array) => Array.from(new Set(array));

For example, in the context of phone numbers:

{
    columnName: I18n.t('ccenter.case_file.table.phones'),
    columnValue: removeDuplicates(row.debtorInfo.phones).join(', ') || '-'
}

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

Can sweetalert2 be used as a tooltip?

I have a query, is it feasible to include a tooltip in the alert message? Alternatively, could there be another tooltip option available? Swal.fire({ title: '<strong>An example with HTML tags</strong>', icon: 'info', ...

A guide to exporting a PDF in A4 size landscape mode with jspdf

As a novice in UI development, I am currently trying to export HTML content to PDF using the JSPDF library. However, I have encountered difficulties in generating the PDF in A4 size landscape mode. The HTML code includes data with charts (canvasjs/chartjs) ...

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

What are the steps to kick off my React App once I've cloned it?

Currently grappling with deploying my app using Netlify, I encountered an issue after cloning the app onto my new computer. > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8afee5eee5e6e3f9fefcb8cabba4baa4ba">[email  ...

Rearrange and place items at the dropped location

I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later. However, I have encoun ...

What is the best way to trigger a function on every navigation event in a React Native application?

Here is my scenario: We are currently working on adding an inactivity timeout feature to a react native app. The goal is to have the timeout reset every time a user interacts with the app or navigates between screens. At the moment, we have a callback fu ...

Proper method for extracting and sending the final row of information from Google Sheets

The script I have is successfully formatting and sending out the information, but there is an issue. Instead of sending only the latest data, it is sending out each row as a separate email. I specifically want only the last row of data to be sent. functio ...

How can I update the style of my array-bars using componentDidMount()?

I created a visualization tool for sorting algorithms that displays vertical bars with varying heights and sorts them. The "Generate new Array" button triggers a function to generate a new array each time it's clicked, which is also used in the compon ...

What is the correct way to upload an image using the Express static middleware?

Just diving into express, I have this setup in my server: app.use(express.static(path.join(__dirname, 'includes'))); When it comes to my client-side JavaScript, I'm simply using the URL like so: var img = $("<img />").attr('s ...

Ways to maintain the value of req.session using express-session

Check out these lines of code: const session = require('express-session'); const sessionConfig = { secret: 'somesecretkey', cookie: {secure: false}, resave: false, saveUninitialized: false, store: new mongostore({ mo ...

Vue Bootstrap toaster that magically disappears in an instant

My Vue Bootstrap Web-App (v2.21.2) is designed to utilize Toasts for displaying errors generated by the REST API client to users. When errors are caught in my components, a function is called that uses this.$bvToast.toast() to dynamically generate and dis ...

How can I dynamically update the sidebar in Ionic 3 post-login without the need to reload the app or refresh the browser?

I have successfully implemented login and sign up functionality in my ionic 3 app. However, I am facing an issue where the username is not updating in the sidebar instantly after logging in. Currently, I need to refresh the browser or close and reopen the ...

Tips for attaching event listeners to custom elements

Let's suppose I create a Vue component called Checkbox.vue that contains the following code. <template> <div class="checkbox"> <input id="checkbox" type="checkbox"> <label for="checkbox">Label</label> ...

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

I'm currently working on creating a basic login form for users to access a website, where I plan to store their session data in a session cookie. The express-session documentation provides the following example for setting it up: app.post('/login ...

VueJS: Transforming Date Formats from Backend to Frontend

I have a scenario where I need to format a date retrieved from the backend before displaying it on the frontend. The data is being presented in a table structure as shown below: <vue-good-table :columns="columns" :rows="formatedItems" : ...

The command "npm run build" is failing and encountering errors within the webpack project

Today, when I ran npm run build in the terminal, my project stopped running and displayed 90 errors and 13 warnings. It was working fine yesterday, so I'm not sure what the issue could be. The only change I made was to a line of JavaScript code that i ...

Attempting to retrieve data from HTML in VueJS using two distinct variables

Here's the issue I'm facing: I have two arrays. The first one, which we'll call A, looks like this: [{id: 2, otherValue: "hello"}] The second array, which we'll call B, looks like this: [{1: {title: "title1", text: "message1"}, 2: {t ...

Handling ajax errors when connection to the internet is disrupted

When working with ajax calls, I have encountered an issue with the "error" handler not functioning correctly when the internet connection is lost. Is there an alternative handler that can be used for these scenarios? $.ajax({ type: "GET", ur ...

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

I'm currently working on the login form. Below is my view in CodeIgnitor: <div id="login-form"> <?php echo heading('Login', 2); echo form_open('login/login_user'); echo form_input('email', set_value ...

Encountering difficulties loading .mtl and .obj files using react-three-renderer

I'm currently utilizing react-three-renderer to load .obj and .mtl files, but I'm encountering difficulties in rendering the model. Instead, a cube is being rendered inside the div. My goal is to replace the cube with my desired .obj model. Inst ...