Question

我有一个这样的对象数组（超过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>

我的示例code is here。

我希望这对我想说的有意义。谢谢！

Answer 1

这是一个示例，您可以使用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));

Answer 2

好的，我想我只是发表评论，但我想我也可以做出答案。我认为您的代码几乎是正确的。您唯一的错误是拆分数组后再次加入数组。所以

（'X，Y，Z'）。split（'，'）-> ['X'，'Y'，'Z']

基本上，您应该在这里停止。但是，然后在代码中执行的操作是将数组连接回字符串。

['X'，'Y'，'Z']。join（'，'）->'X，Y，Z'

只需离开联接并从中更正计算对象中的行

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

到

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

你应该没事

如何将对象字符串拆分为单个字符串？ VueJS和计算属性

2 个答案: