Clash Royale CLAN TAG#URR8PPP

How to split object strings into individual strings? VueJS and computed property

I have an array of objects like so (200+ objects!):

[

Name: 'Aerial Farm',
'Geometry Extracted': 'P, S'
,

Name: 'Aircraft Hangar',
'Geometry Extracted': 'P, C, S'

]


I need to loop through the objects and split the values of the Geometry Extracted property into individual elements like "P" and "S" rather than a single string of "P, S".

Geometry Extracted

I tried doing this as a computed property in VueJS:

computed:
geoList()
return this.items.map(i =>
i['Geometry Extracted'].split(', ').join(', ')
);




and then Looping through it in my template like so:

<ul>
<li v-for='item in geoList' :key='item.id'>
<a href='#'>item</a>
</li>
</ul>


but, the HTML was rendered like so:

...
<li>
P, S
</li>
...


My goal is to get it like so:

<li>
<a href="#">P</a>
</li>
<li>
<a href="#">S</a>
</li>


My example code is here.

I hope this makes sense to what I am trying to say. Thanks!

:key="item.id"

geoList

2 Answers
2

Here's an example how you can create HTML elements containing those characters with Javascript. Edit the functions to suit your specific needs.

var dummyObject = [
Name: 'Aerial Farm',
'Geometry Extracted': 'P, S'
,

Name: 'Aircraft Hangar',
'Geometry Extracted': 'P, C, S'
,

Name: ' Farm',
'Geometry Extracted': 'P, S'
,

Name: 'Aircraft ',
'Geometry Extracted': 'X, X, X'
,

Name: 'Aerial Google Farm',
'Geometry Extracted': 'P, D'
,

Name: 'Blue Hangar',
'Geometry Extracted': 'P, C, S, N'
,
]

function getGeometry(myObject)
return myObject['Geometry Extracted'].split(', ');


function createClasses(myArray)
myString = '';
myArray.forEach(function(element)
myString += "<li><a href="#">" + element + "</a></li>";
)
return myString;


function loopObjects(objectArray)
myString = '';
objectArray.forEach(function(element)
myString += createClasses(getGeometry(element));
)
return myString;


console.log(loopObjects(dummyObject));

Ok I thought I'd just comment but I guess I can make an answer as well. I think you're code is almost right. You're only error is that you join the array again after you split it. So

('X,Y,Z').split(',') --> ['X','Y','Z']

Basically you should stop here. But what you do then in your code is you join the array back to a string.

['X','Y','Z'].join(',') --> 'X,Y,Z'

Just leave the join and correct the line in your computed object from

i['Geometry Extracted'].split(', ').join(', ')


to

i['Geometry Extracted'].split(', ')


and you should be fine

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.