У меня есть массив таких объектов (объекты 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>
Мой примерный код здесь.
Надеюсь, это имеет смысл для того, что я пытаюсь сказать. Спасибо!
Хорошо, я думал, что просто комментирую, но я думаю, я тоже смогу ответить. Я думаю, что вы код почти прав. Вы только ошибка в том, что вы снова присоединяетесь к массиву после его разделения. Так
('X, Y, Z'). Split (',') → ['X', 'Y', 'Z']
В принципе, вы должны остановиться здесь. Но что вы делаете в своем коде, вы присоединяете массив к строке.
['X', 'Y', 'Z']. Join (',') → 'X, Y, Z'
Просто оставьте соединение и исправьте строку в вычисленном объекте из
i['Geometry Extracted'].split(', ').join(', ')
в
i['Geometry Extracted'].split(', ')
и вы должны быть в порядке
Вот пример того, как вы можете создавать HTML-элементы, содержащие эти символы с Javascript. Отредактируйте функции в соответствии с вашими конкретными потребностями.
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));
:key="item.id"
всегда будет неопределенным, кстати. Элементы массива, возвращаемыеgeoList
являются строками.