CODEWITHSUNDEEP
arraysreactjsmapping
Jacki
Jacki

Reputation: 672

React map through two arrays without duplication

I have problem that I gotta make table which is divided on half at the beginning shows left side and middle Ids, then after receiving data from api request, it compares these two arrays and mark differences on red. Actually it works partly good, so it map through 2 arrays, and if it finds any differences then color it on red, the problem is that it also duplicates all elements and in the end table has double same rows several times. I understand that it is because I'm mapping array inside another mapping but I don't have idea how to solve this problem. Basic idea is: Show all results without duplication, and mark differences. I know how to mark differences but totally have no idea how to not show duplicates Here I post minimized code for easier reading Thanks!

   const applicationsTable = (classes, current, compared) =>
  current.configuration.applications.map((el, i) => 
      compared &&
      compared.configuration.applications.map((comparedEl, i) => (

        <TableRow key={i}>
          <StyledFiledTableCell>
            <Typography variant="body2">
            {el.version}

            </Typography>
          </StyledFiledTableCell>

          <StyledFiledTableCell colSpan="5">
            <Typography variant="body2">{el.aid}</Typography>
          </StyledFiledTableCell>

          {el.aid == comparedEl.aid ? (
            <>
              <StyledFiledTableCell>
                <Typography variant="body2">
                {comparedEl.version}

                </Typography>
              </StyledFiledTableCell>

            </>
          ) : (
            <StyledFiledTableCell colSpan="5" />
          )}
        </TableRow>
      ))
    )

here I post also photo of my problem, as you can see, elements in table are duplicated enter image description here

and here is example of my compared and current data:

const current.configuration.applications = [
    {
      aid: "E82B0601040181C31F0201",
      lifeCycle: "SELECTABLE",
      version: null
    },
    {
      aid: "E82B0601040181C31F027F0301",
      lifeCycle: "SELECTABLE",
      version: null
    },
    {
      aid: "D2760001725041636301",
      lifeCycle: "SELECTABLE",
      version: null
    },
    {
      aid: "D276000172536F434D01",
      lifeCycle: "SELECTABLE",
      version: null
    },
  ]

  const compared.configuration.applications = [
    {
      aid: "E82B0601040181C31F0201",
      lifeCycle: "SELECTABLE",
      version: "03.02"
    },
    {
      aid: "D276000172536F434D01",
      lifeCycle: "SELECTABLE",
      version: "02.07"
    },
  ]

Upvotes: 1

Views: 1153

Answers (3)

Jee Mok
Jee Mok

Reputation: 6556

If I understand your requirement correctly, you want to display the version value on the compared list for the same application ID. If I am right, then you actually don't need two .map() function, what you need is a .find() method:

const applicationsTable = (classes, current, compared) =>
  current.configuration.applications.map((el, i) => {
    const comparedEl = compared.configuration.applications.find(comparedEl => comparedEl.aid === el.aid);
    return (
      <TableRow key={i}>
        <StyledFiledTableCell>
          <Typography variant="body2">
            {el.version}
          </Typography>
        </StyledFiledTableCell>

        <StyledFiledTableCell colSpan="5">
          <Typography variant="body2">
            {el.aid}
          </Typography>
        </StyledFiledTableCell>

        {
          comparedEl ? (
          <>
            <StyledFiledTableCell>
              <Typography variant="body2">
                {comparedEl.version}
              </Typography>
            </StyledFiledTableCell>
          </>
          ) : (
          <StyledFiledTableCell colSpan="5" />
          )
        }
      </TableRow>
    );
  }
)

Upvotes: 1

befev
befev

Reputation: 71

I'm not sure I exactly understand your problem. But if you have input data like this:

const current = { configuration: {} };
current.configuration.applications = [
    {
        aid: "1",
        lifeCycle: "SELECTABLE",
        version: null
    },
    {
        aid: "2",
        lifeCycle: "SELECTABLE",
        version: null
    },
    {
        aid: "3",
        lifeCycle: "SELECTABLE",
        version: null
    },
    {
        aid: "4",
        lifeCycle: "SELECTABLE",
        version: null
    },
];

const compared = { configuration: {} };
compared.configuration.applications = [
    {
        aid: "1",
        lifeCycle: "SELECTABLE",
        version: "03.02"
    },
    {
        aid: "4",
        lifeCycle: "SELECTABLE",
        version: "02.07"
    },
];

By using this code you will get unique values of current and compared + duplicate values will be merged and marked by colorRed: true 

const merged = current.configuration.applications.map((item, index) => {
    if (compared) {
        const findCompared = compared.configuration.applications.find((e) => e.aid === item.aid, index);
        if (typeof findCompared !== "undefined") {
            return {
                ...item, ...findCompared, colorRed: true
            };
        }
    }
    return item;
});

Then result array will be like this: 

// merged =>
[
  {
    "aid": "1",
    "lifeCycle": "SELECTABLE",
    "version": "03.02",
    "colorRed": true
  },
  {
    "aid": "2",
    "lifeCycle": "SELECTABLE",
    "version": null
  },
  {
    "aid": "3",
    "lifeCycle": "SELECTABLE",
    "version": null
  },
  {
    "aid": "4",
    "lifeCycle": "SELECTABLE",
    "version": "02.07",
    "colorRed": true
  }
]

So you just can go through merged by .map() and display all the data.

P.S.: I changed 'aid' to make the example simpler, but you can use it with your data.

Upvotes: 1

Anh Khoa
Anh Khoa

Reputation: 53

I think you should use another method, not another map() in side the outer loop. Try using Array.prototype.find() and give the map() a condition if you can find a dup.

Upvotes: 1

Related Questions