Filter an array of strings that have only ONE word

Question

I'm working on a simple dictionary website challenge for a job position, and I need to consume a JSON file with an array of strings and display a list of words on the screen; however, this file provided by the challenge has not only words but phrases as well, which is also being displayed on the screen, and I would like to get rid of them!

I'm trying to filter the array and get the strings with only ONE word.

Is that possible? If so, could you please help me?

See below a part of the array. This file has more than 130k strings with words/phrases, so I can't delete the phases myself!

[
  "acciaccatura",
  "accident",
  "accidental",
  "accidentally",
  "accidentally on purpose",
  "accident and emergency",
]

Also, see below the code with the .map() I'm using to display the words on the screen.

 <div className="word-container">
   {words.map((data) => (
     <span className="word">{data}</span>
   ))}
 </div>

Many thanks!

Ps.: this is my first ever question here, so I apologise if I made any mistake. I'm also new to coding, so I'm trying to get used to using more StackOverflow!

Mario Vernari · Accepted Answer · 2022-10-05 04:12:49Z

1

That should do what you ask:

 <div className="word-container">
   {words.filter(w => w.indexOf(' ') < 0).map((word) => (
     <span className="word">{word}</span>
   ))}
 </div>

The filter leverages on the indexOf method, which finds the first index of a string occourrence, that is a space in your case.

Negative index means no space found, hence just a single word.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

answered Oct 5, 2022 at 4:12

Mario Vernari

7,4341 gold badge37 silver badges57 bronze badges

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

Comments

Amanjot Singh · Accepted Answer · 2022-10-05 04:20:59Z

0

You can add a condition to check whether there is any space within the array value or not, using the Array.prototype.includes

The below code will render all the words from your array that has no spaces.

<div className="word-container">
   {words.map((data) => (
     !data.includes(" ") && <span className="word">{data}</span>
   ))}
 </div>

The another approach could be using the Array.prototype.filter and filter out all the values that contains space using includes array method. The below code will return you a new array and you can use that directly in your map function.

words.filter(data => !data.includes(' '))

answered Oct 5, 2022 at 4:20

Amanjot Singh

1496 bronze badges

Comments

ocobacho · Accepted Answer · 2022-10-05 04:35:12Z

0

You can look for spaces to determine if the element in the array is a phrase or word. If index of the element is equal to -1 it means that it doesn't have any spaces, so is a word.

<div className="word-container">
   {words.filter(item => item.indexOf(' ') == -1).map((word) => (
     <span className="word">{word}</span>
   ))}
 </div>

answered Oct 5, 2022 at 4:35

ocobacho

5413 silver badges8 bronze badges

Collectives™ on Stack Overflow

Filter an array of strings that have only ONE word

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related