Home » vue » How to reduce multiple instances of the same value appearing in a table?

How to reduce multiple instances of the same value appearing in a table?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have a table in my app, in which I push many values into an Array. These arrays then show the value within my table columns, at the bottom I have a small example of what I mean. Sometimes it takes double of the same value.

How best do I reduce this so that only one of the same value is present in the ColumnValue Arrays?
Current Code:

    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(', ') || '-'
        },
      ]
    }
  }
}

Previous Methods Used:

     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
Answers:

As I understand it, a function such as:

const removeDupes = (arr) => Array.from(new Set(arr));

would do the trick

For instance, for your phone number examples:

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