Array insertion organized in Array for later use as variable

Asked

Viewed 56 times

3

In a Javascript file, I have the following array group:

logo: [
  require('@/assets/images/logos/lojas-' + cobrand[0] + '.png'),
  require('@/assets/images/logos/lojas-' + cobrand[1] + '.png'),
  require('@/assets/images/logos/lojas-' + cobrand[2] + '.png'),
  require('@/assets/images/logos/lojas-' + cobrand[3] + '.png')
]

Each require references an existing image in the folder logos, where each image has the name of the store, as follows:

let cobrand = [
  'informatica',
  'mercearia',
  'locadora',
  'padaria'
]

So, inside the briefcase logo I have an image for each cobrand:

lojas-informatica.png
lojas-mercearia.png
lojas-locadora.png
lojas-padaria.png

Since it only has 4 items, it was very simple to use the form that is in this question, create an array with all the same changing only the index of cobrand[i].

Only, when this gets bigger, it will become quite expensive. There is a way to do the array logo have 1 line only with all cobrands?

I thought I’d use the concat as in this example I learned in another question: 

[].concat(arrayum, arraydois, [ 'valueum', 'valuedois' ])

But this in a simple way will make all the cobrand enter the URL together, which is not the case that I’m looking for.

I cannot create a Function unless it is within the array line logo: [].function aqui or the for as long as it is within this array as well

javascript array
  • 1

    But it’s not just making one for in cobrand[] and us required put cobrand[i] ??

  • @Leandrade can’t do a Function

  • 1

    Hmmm, then complicates in man, having a Javascript file and not being able to create a function, is the same thing as going to Maresias and not like sand.

  • 1

    If I understand correctly what you want to do is something like logo: cobrand.map(nome => require(\@/Assets/images/logos/stores-${name}. png`))`. That’s it?

  • I will test here, apparently that’s right, it will create an array with all the options inside the cobrand, I will test and I tell you

  • @exact user140828, on the console he created an array with all the images without running error, very good, this is very right

Show 1 more comment

1 answer

2

I don’t know if I understand the problem correctly ...but if the intention is to store the paths of your logos in an easy way to use (and reuse), rather than using one array [ ... ], you could keep them inside a Object { ... } already with the ways of the ready inclusive. So:

let cobrandUrls = {
  informatica: '@/assets/images/logos/lojas-informatica.png',
  mercearia: '@/assets/images/logos/lojas-mercearia.png',
  locadora: '@/assets/images/logos/lojas-locadora.png',
  padaria: '@/assets/images/logos/lojas-padaria.png'
}

Hence, when you need to use a logo, simply access the desired property within the object.

Remembering that you can access the property value of an Object both using the point syntax prorpiety. regarding the syntax of square brackets object['property'], is the same!

cobrandUrls.informatica    //  @/assets/images/logos/lojas-informatica.png
cobrandUrls['mercearia']    //  @/assets/images/logos/lojas-mercearia.png

Thus, possession of the variable cobrandUrls, as defined above, you can leave using your paths wherever you want!

For example, for example... with pure HTML and JS:

// html
<img id="logo-img" />

// js
const img = document.getElementById('logo-img')
img.setAttribute('src', cobrandUrls.padaria)

example with React

<img src={cobrandUrls.padaria} />

example with Angular

<img [src]="cobrandUrls.padaria" />

If for some reason you need to go through all cobrandUrls logos you can easily iterate the Object keys using Object.Keys(), the values contained in each key with Object values.() or iterate Object.() that returns both key and value:

for (const chave of Object.keys(cobrand)){
  console.log(chave)
}
// informatica
// mercearia
// locadora
// padaria

for (const valor of Object.values(cobrand)){
  console.log(valor)
}
//  '@/assets/images/logos/lojas-informatica.png',
//  '@/assets/images/logos/lojas-mercearia.png',
//  etc..


for (let [chave, valor] of Object.entries(cobrand)){
  console.log(chave + ' : ' + valor)
}

// informatica : @/assets/images/logos/lojas-informatica.png
// mercearia : @/assets/images/logos/lojas-mercearia.png
// etc..

Here in the examples I’m just giving a console.log in each item, but I think you can imagine how useful this can be because it allows you to create logic to measure, to work each value inside the object as you wish.

In fact all this would also be possible with an array of urls...but, as you said yourself, arrays have no keys, only numeric indices, so if the array grows, you will have to know the exact position of each item you want or create a function to find out...which may even work, but it will surely make your work heavier and your code less readable.

Browser other questions tagged javascript array

You are not signed in. Login or sign up in order to post.