1

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" }, ]
Improve this question
5
  • you can try lodash uniq method Commented Aug 5, 2019 at 6:31
  • hmm could you give some example? as I kinda don't know how to implement lodash in my case Commented Aug 5, 2019 at 7:16
  • hmm I don't quite understand your algorithm above. Are you trying to find the differences between two arrays based on aid value, and show them on a table? Commented Aug 5, 2019 at 7:45
  • my issue is, I have two arrays which I get from two different api responses. First one is named current, another one is named compared. I wish to loop and display them in tables as shown above. long number is aid, on the left I wish to display version from current, on the right side I wish to display version of compared. (if it is null then I don't display it) anyway as you can see after double looping, row with aid gets duplicated, I wish to get rid of any duplicated row Commented Aug 5, 2019 at 8:09
  • ah. so you want to map the version from another array to the left array? Let me rephrase your intention: you want to display current list on the left hand side of the table, and on the right hand side, find the version value from compared list, am I right? Commented Aug 5, 2019 at 8:54

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

it works! That's not exactly what I meant but your solution got me idea and now it works fine! Thank you so much for help
1

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.

Improve this answer

3 Comments

but the problem is that sometimes aid is going to be same with current and compared data and just gotta replace other values, sometimes in compared data is aid which current doesn't contain and then gotta add it, so find might to not work
lol I should have be more clear on this. But a find() method works right?
yep, just I couldn't get idea how to implement it, but your idea was good! Thanks man
1

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> ); } )
Improve this answer

2 Comments

Thanks my friend for all help:) indeed proper using of find() was a key. Thank you for all help:)
@Jacki glad you found the solution! no worries! (y)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.