我有一个像这样的对象数组(200+对象!):
[
{
Name: 'Aerial Farm',
'Geometry Extracted': 'P, S'
},
{
Name: 'Aircraft Hangar',
'Geometry Extracted': 'P, C, S'
}
]
我需要遍历对象并将Geometry Extracted
属性的值拆分为像"P“和"S”这样的单个元素,而不是一个由"P,S“组成的字符串。
我试着在VueJS中以计算属性的形式这样做:
computed: {
geoList() {
return this.items.map(i =>
i['Geometry Extracted'].split(', ').join(', ')
);
}
}
然后在我的模板中循环它,如下所示:
<ul>
<li v-for='item in geoList' :key='item.id'>
<a href='#'>{{item}}</a>
</li>
</ul>
但是,HTML是这样呈现的:
...
<li>
P, S
</li>
...
我的目标是让它像这样:
<li>
<a href="#">P</a>
</li>
<li>
<a href="#">S</a>
</li>
我的示例。
我希望这对我要说的话有意义。谢谢!
发布于 2018-08-06 04:35:40
下面是一个使用Javascript创建包含这些字符的HTML元素的示例。编辑函数以满足您的特定需求。
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));
发布于 2018-08-06 16:02:51
好吧,我想我只是评论一下,但我想我也可以做出回答。我认为你的代码几乎是正确的。您唯一的错误是在拆分数组之后再次加入数组。所以
('X,Y,Z ') .split(',‘) --> 'X','Y','Z'
基本上你应该停在这里。但是在你的代码中,你要做的就是将数组连接回一个字符串。
'X','Y','Z'.join(',') --> 'X,Y,Z'
只需保留连接并将计算对象中的行从
i['Geometry Extracted'].split(', ').join(', ')
至
i['Geometry Extracted'].split(', ')
你应该会很好
https://stackoverflow.com/questions/51697834
复制相似问题