Truncate a string by words, add a count of not listed items at the end-CodePudding

Many of the ways of truncating a string have been covered but I couldn't find anywhere that my case was covered.

Here is the case:

First user's language array:

[
    {"id": 1, "label": "English", },
    {"id": 2, "label": "French", },
]

Second user's language array:

[
    {"id": 1, "label": "English", },
    {"id": 2, "label": "French", },
    {"id": 3, "label": "German", },
    {"id": 4, "label": "Turkish", }
]

Third user's language array:

[
    {"id": 1, "label": "Farsi", },
    {"id": 2, "label": "Dutch", },
    {"id": 3, "label": "German", },
    {"id": 4, "label": "Turkish", }
    {"id": 5, "label": "English", }
]

I concatenate the languages with commas and if the total length is bigger than 15, I want to break by words and add a count of not listed languages at the end.

Please note, I don't want to include the last language if the limit is exceeded as seen in the third example.

I want to show this in my UI like this:

First user:

English, French

Second user:

English, French, 2

Third user:

Farsi, Dutch, 3

Here is how I concatenate:

const languageLabels = props?.languages?
      .map(({label}) => label)
      .join(", ")
      .toString()

This gives a result for the second example like the following:

English, French, German, Turkish

Edit: I want to add an edge case.

Fourth user's language array:

[
    {"id": 1, "label": "Arabic (Egyptian Spoken)", },
]

In that case, I want to display: Arabic (Egyp...

CodePudding user response：

I hope I understood your question clearly. If not, please let me know.

So assuming we have an array languages as follows:

const languages = [
    {"id": 1, "label": "English", },
    {"id": 2, "label": "French", },
    {"id": 3, "label": "German", },
    {"id": 4, "label": "Turkish", }
    ]

We would like to combine all the languages in one array, then check its length. We then display the first 2 languages followed by a n where n is the number of the remaining number of languages in the array. correct?

In that case, the below code should do the trick:

let textToDisplay = languagues.map(l => l.label).slice(0,2).join(', ')   ',  '   languagues.map(l => l.label).length

This would only work if the array languages has at least 2 objects in it. If it has only one object, hence one language, I doubt you would even need this then since you directly display that language.

CodePudding user response：

Is the max length 15 of the string including commas and whitespaces? Or just the characters in the language strings?

Regardless, you should start by determining how many languages can fit in the final string, and store any items that might come after that in a counter.

The first thing I would do is make sure the first language doesn't have more than 15 characters in it.

let finalString = ""
let counter = 0
if (languageLabels[0].length > 15 || (languageLabels[0].length   languageLabels[1].length) > 13){ //Both of these cases will mean you can only display the first language (if you don't want to substring the second language)
//13 because counting comma and whitespace, 15 if not.
    finalString = languageLabels[0].substring(0, 12) //If the absolute maximum length of this string is 15, this is to control for the ellipses. If not, change the 12 to a 15.
    finalString.concat("...") //as per your example at the end of the post
    for (let i = 1; i < languageLabels.length; i  ) { //i is 1 here instead of 0 because we already grabbed the 0 index for finalString. You would set this to 2 if you grabbed *both* the first and second (0 and 1 index) languages, and so on.
        counter  = 1
    }
    finalString.concat("  ").concat(counter)
} else {
    finalString = languageLabels[0].concat(", ".concat(languageLabels[1])
    for (let i = 2; i < languageLabels.length; i  ) {
        counter  = 1
    }
    finalString.concat("  ").concat(counter)

I can't think of a case in which you will be able to fit more than 2 languages into this 15 character limit string, so this should be sufficient. If not you can extend this for one more check.

Edit: Sorry this is a bunk example I realized as you might not have more than one list item sometimes. You can add a check before this to determine the length of languageLabels and perform these checks based on that. This code is assuming there are at least 2 languages for each person.