Dynamic text based on (I) API data; and (ii) drag and drop result

Hi, I have a drag and drop section that allows users to position items in a specific order they wish.

After that and an action is taken e.g. a button pressed, an API is ran to finally display a text result based on the drag and drop order of the items.


A football player has several stats like height, weight, team, name.

The user moves the drag and drop section of the stats around to position them in desired order e.g. Name and Team. The other 2 stats (Weight and Height) are not selected)

A button is pressed and the API runs to extract ALL the data from an external service.

I wish to display in text, what the user dragged and dropped in his desired order - Name and Team.

So the end result text on front-end would be e.g. “David Beckham - Manchester United”.

The API works. Just that I’m not sure of the mechanism to link e.g. the Name and “David Beckham”, and display the API-called result in the order of the dragged and dropped section.

Thanks all!