CODEWITHSUNDEEP
javascripthtmlarraysvue.jsformatting
Al Capwned
Al Capwned

Reputation: 90

Formatting dynamic html content...ex: {{foobar.data}}

I have some dynamic HTML content: <td> {{ hash2.transactions}} </td> in a Vue component. Ive seen them called so many things too...handlebars, computed properties, dynamic content...maybe someone could kindly tell me also what the most correct name for them is?

Here is the rendered data itself raw from the API: [["3h05YxcE9lmZYNQ7iZVC8ZehEjR3iauz",["Movement Detected"]]]

Basically I wanted to show only the Movement Detected bit.

What I tried

I started by converting to a string: {{ hash2.transactions.toString() }} which removed the array braces.

Then I tried rendering by the character numbers: {{ hash2.transactions.toString()[34, 35, 36, 37, 38, 39] }}

The problem with the above attempt was that this would display only the 39th character, ignoring the preceding characters.

So I tried concatenation , which seemed to work, but obviously this is a bit verbose and probably frowned upon.

<td> {{ hash2.transactions.toString()[33] + hash2.transactions.toString()[34] + hash2.transactions.toString()[35] + hash2.transactions.toString()[36] + hash2.transactions.toString[37] + hash2.transactions.toString[38] hash2.transactions.toString[39] }} </td>

Surely there is a more dignified way to do this? Hoping someone could weigh in and enlighten me a bit. Thanks.

Upvotes: 0

Views: 41

Answers (1)

Abdullah Osama
Abdullah Osama

Reputation: 607

From what I understood is the you want to display the "movment detected" bit only
And the hash2.transaction returns this [["3h05YxcE9lmZYNQ7iZVC8ZehEjR3iauz",["Movement Detected"]]] as a string
Well, That looks like its a JSON for me You could do
JSON.parse(hash2.transaction)[0][1][0]; That must return the "movment detected" string
If it exists if not it will return an error

You could do something like this

<td> {{ JSON.parse(hash2.transaction)[0][1][0]; }} </td>

Upvotes: 1

Related Questions