How to search for a specific value in an array of objects

Question

I want to make my code render the data when i search for a value, tried it by using for, but it keeps showing unexpected token. Is there any way to do it properly? It may be an easy question but i don't really know how to make this work.

export default function SelecionaRota() {
    const rota = {
        locais: [
            {
                nome: 'Rio de Janeiro',
                rotas: [
                    {
                        nome: 'RJ-SP',
                        valor: 1200
                    },
                    {
                        nome: 'RJ-BSB',
                        valor: 1400
                    }
                ]
            },
            {
                nome: 'São Paulo',
                rotas: [
                    {
                        nome: 'SP-RJ',
                        valor: 1200
                    },
                    {
                        nome: 'SP-BSB',
                        valor: 1400
                    }
                ]
            }
        ]
    }
    const location = useLocation()
    const { estadoOrigem } = location.state
    return (
        <div>
            <h1>{estadoOrigem}</h1>
            {for (var i = 0;i < rota.locais.length;i++) {
                if (estadoOrigem === rota.locais[i].nome) {
                    rota.locais[i].rotas.map(module => (
                        <>
                            <h1>{module.nome}</h1>
                            <h2>{module.valor}</h2>
                        </>
                    ))
                }
            }}
        </div>
    )
}

Error:

./src/pages/Rota.js
SyntaxError: D:\Arquivos\1 Estágio Teste\aeroporto-teste\src\pages\Rota.js: Unexpected token (39:13)

  37 |         <div>
  38 |             <h1>{estadoOrigem}</h1>
> 39 |             {for (var i = 0;i < rota.locais.length;i++) {
     |              ^
  40 |                 if (estadoOrigem === rota.locais[i].nome) {
  41 |                     rota.locais[i].rotas.map(module => (
  42 |                         <>

It appears you're trying to loop over an array. Are you familiar with [array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) like [.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)? — It'sNotMe, Dec 12 '21 at 23:56
See [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx).. — jarmod, Dec 13 '21 at 00:08

Siva K V · Accepted Answer · 2021-12-13T06:50:41.923

1

First find the item from list, then use map over rotas

Update: Adding the missing return statement.

return (
  <div>
    <h1>{estadoOrigem}</h1>
    {rota.locais
      .find((item) => estadoOrigem === item.nome)
      ?.rotas.map((module) => {
        return (
          <>
            <h1>{module.nome}</h1>
            <h2>{module.valor}</h2>
          </>
        );
      })}
  </div>
);

edited Dec 13 '21 at 06:50

answered Dec 12 '21 at 23:57

Siva K V

10,561
2
16
29

2

While possibly correct, this doesn't enlighten the OP as to why his code fails (because a for loop is not an expression i.e. does not resolve to a value). – jarmod Dec 13 '21 at 00:01
I tried to add this in my code but it is not working, I'm trying to figure out why. – amorim Dec 13 '21 at 00:07
1

I change it a bit and now it is working, the module => {} was stucking it, it was suposed to be module => () – amorim Dec 13 '21 at 00:39
Good catch on fixing the solution. Let me update the answer. Thanks. – Siva K V Dec 13 '21 at 06:49

score 1 · Answer 2 · answered Dec 12 '21 at 23:57

you could do the 'filtering' or searching before the rendering.

const region = rota.locais.find(location => location.nome === estadoOrigem);

and then use the variable 'region' inside your return.

If you can have multiple regions, use:

const regions = rota.locais.filter(location => location.nome === estadoOrigem);

score 1 · Answer 3 · answered Dec 13 '21 at 00:02

I've never needed to use a for loop in the jsx of a component. Generally you'll want to have a component that does whatever filtering you want done in the javascript piece and then loop through the remaining data.

So I'd do:

let locations = []
const filterLocations = () => {
for (var i = 0; i < rota.locais.length; i++){
if(estadoOrigem === rota.locais[i].nome){
locations.push(i);
}
}}

Then the jsx would just do:

locations.map((i) => (( i.doStuff ))

You always want to start with the least efficient way of doing things and then trying to refactor little by little instead of trying to figure out something clever right off the bat. Like instead of doing that for loop.

You could also use the javascript .filter() method to filter out whatever data you need and then push that to an array to map through.

How to search for a specific value in an array of objects

3 Answers3