Como acessar a propriedade do object com caracteres inválidos

Estou escrevendo um aplicativo Angular que faz interface com uma API do Google Analytics já em uso. Os dados retornados pelo Google são prefixados com “ga:”, como no exemplo “ga: newVisits”.

Se eu usar a expressão {{total.ga:newVisits}}, o Angular não poderá analisá-la. Qualquer tentativa de escaping do cólon para continuar resultou em um erro ou escapando da minha expressão completamente.

Como posso passar {{total.ga:newVisits}} para Angular para que a expressão funcione corretamente?

       
  • {{total.ga:newVisits}}

Em JavaScript, as propriedades do object podem ser acessadas por notação de ponto ou notação de colchetes. A notação de pontos geralmente é mais limpa, mas tem restrições. Como você notou, sua propriedade contém um caractere inválido e, portanto, não pode ser acessada via notação de ponto. A solução, então, é acessar a propriedade usando a notação de colchetes como: total['ga:newVisits'] para que seu código completo seja {{total['ga:newVisits']}} . Demonstração ao vivo aqui (clique).

Outro recurso interessante sobre a notação de colchetes é que ele permite que você use um nome de variável como uma propriedade:

 var myObj { bar: '123' }; var foo = 'bar'; console.log(myObj[foo]); //logs '123' 

Você precisa acessá-lo como se fosse um array associativo:

 {{total['ga:newVisits']}}