4

Em um arquivo JavaScript, possuo o seguinte grupo de arrays:

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')
]

Cada require faz referência a uma imagem existente na pasta logos, onde cada imagem tem o nome da loja, como a seguir:

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

Então, dentro da pasta logo tenho uma imagem para cada cobrand:

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

Como só tem 4 itens, ficou bem simples utilizar a forma que está nesta pergunta, criar um array com tudo igual mudando apenas o index do cobrand[i].

Só que, quando isso ficar maior, se tornará bastante custoso. Existe uma forma de fazer o array logo ter 1 linha apenas com todos os cobrands?

Pensei em utilizar o concat como neste exemplo que aprendi em outra pergunta:

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

Porém isso de forma simples, fará com que todos os cobrand entrem juntos na URL, o que não é o caso que procuro.

não posso criar uma function a não ser que seja dentro da linha do array logo: [].function aqui ou o for desde que seja dentro deste array também

6
  • 1
    Mas não é só fazer um for em cobrand[] e nos required colocar cobrand[i] ??
    – LeAndrade
    Commented 30/07/2019 às 18:13
  • @LeAndrade não posso fazer uma function Commented 30/07/2019 às 18:23
  • 1
    Hmmm, aí complica em man, ter um arquivo Javascript e não poder criar uma função, é mesma coisa que ir em Maresias e não gostar de areia.
    – LeAndrade
    Commented 30/07/2019 às 18:43
  • 1
    Se entendi direito o que você quer fazer é algo do tipo logo: cobrand.map(nome => require(`@/assets/images/logos/lojas-${nome}.png`)). É isso?
    – Andre
    Commented 30/07/2019 às 18:46
  • vou testar aqui, aparentemente é isso mesmo, ele irá criar um array com todas as opções dentro do cobrand, vou testar e te falo Commented 30/07/2019 às 19:14

1 Resposta 1

2

Não sei se se entendi bem o problema 🤓...mas se a intenção for estocar os paths das suas logos de uma maneira fácil de usar (e reusar), ao invés de usar um array [ ... ], vc poderia guardá-los dentro de um Objeto { ... } já com os caminhos das prontos inclusive. Assim:

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'
}

Daí, quando vc precisar usar uma logo, bastará acessar a propriedade desejada dentro do objeto.

🤔 Lembrando que vc pode acessar o valor da propriedade de um Objeto tanto usando a sintaxe de ponto objeto.prorpiedade quanto a sintaxe de colchetes objeto['propriedade'], dá no mesmo!

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

Assim, de posse da variável cobrandUrls, como definida acima, já vc pode sair usando seus paths aonde quiser! 🤙🏽

Por exemplo... com HTML e JS puro:

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

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

exemplo com React

<img src={cobrandUrls.padaria} />

exemplo com Angular

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

Se por algum motivo vc precisar percorrer todas as logos de cobrandUrls pode facilmente iterar as chaves do Objeto usando Object.keys(), os valores contidos em cada chave com Object.values() ou então iterar Object.entries() que retorna tanto chave quanto valor:

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..

Aqui nos exemplos estou apenas dando um console.log em cada item, porém acho que já dá pra imaginar o quanto isso pode ser útil pois te permite criar lógicas sob medida, pra trabalhar cada valor dentro do objeto como bem entender.

Na verdade tudo isso também seria possível com um array de urls...porém, como vc mesmo já disse, arrays não tem chaves, apenas indices numéricos, daí se o array crescer, vc terá que saber a posição exata de cada item que deseja ou então criar uma função pra descobrir...o que pode até funcionar, mas com certeza tornará seu trabalho mais pesado e seu código menos legível.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .