返回嵌套数组中的数组元素

Question

我有一个我没有得到太多牵引力的东西，除了一个元素外，我一切都正常工作。本质上，我想在代码中过滤“ev3_4”的返回。我不确定正确的功能。我正在从外部来源获取数据。并且信息位于我能够正确返回的数组的嵌套数组中。

<template>

<!-- the array for the ev data -->
    <div id="ev-deck" class="content">
      <div id="text-box-ev" class="field">
        <div class="control">
<!-- To change the number of events shown change the value for X in v-for="item in infodata.slice(0, X), this is the limiter for how many will loop before it stops -->
          <div class="card-content has-background-dark has-text-light" id="ev-card" v-for="item in p3data.slice(0, 2)" :key="item.infodata">
<!-- Every row is a separate line in the event element and its position is manipulated by the column css -->
            <div class="row">
              <div id="ev-title" class="column">  <b>ev1:</b> {{ item.ev1 (firstname) }}</div>
              <div id="ev-title" class="column"><b>ev2:</b> {{ item.ev2 (lastname)}}</div>
              <div id="ev-title" class="column"><b>ev3:</b> {{ item.ev3_4 (city)}}</div>
            </div>
            <div class="row">
              <div id="ev-title" class="column"><b>ev4:</b> {{ item.ev4 }}</div>
              <div id="ev-title" class="column"><b>ev5:</b> {{ item.ev5 }}</div>
            </div>
            <div class="row">
              <div id="ev-title" class="column-centered"><b>ev6:</b> {{ item.ev6 }}</div>
            </div>
            <div class="row">
              <div id="ev-title" class="column-centered"><b>ev7:</b> {{ item.ev7 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
</template>

<script>    
    
    export default {
 name: 'ev',
    }
    data() {
    return {
      infodata: [],
    },
// I know this is wrong and need help making this logic correct

     item.ev3.filter(data => {
      return data.ev3 === item.ev3_4
     })
  },
  
  created() {
    var info = 'some url'

    axios.get(info)
      .then( response => {
      this.infodata = response.data;

        console.log(response.data);
      })
  },
  
  </script>

这是一个拉动数组的例子

（信息数据数组）

0:
  ev1 (first name):   joe
  ev2 (lastname):     blow
  ev3 (address):
      0:
          ev3_1 (street number):  1234
          ev3_2 (street name):    main
          ev3_3 (zip code):       12345
          ev3_4 (city):           tempe

Answer 1

感谢您更新您的问题。很高兴听到您找到了访问所需数据的解决方案。

根据您的编辑，我认为仍有一些值得注意的地方。您所指的数据实际上存储在一个对象而不是一个数组中（尽管它确实包含一个数组）。

数组具有以下结构：

data = ["val1", "val2", "val3"]

并且通过索引访问数据。

data[0] -> "val1" 
data[1] -> "val2" 
data[data.length - 1] -> "val3"

ev3[0]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

---

另一方面，对象包含由键值对组成的属性。并具有以下结构：

data: {
  val1: "first",
  val2: "second",
  val3: { 
    a: "third a",
    b: "third b",
    c: "third c"
  }
}

使用键访问对象值。

data.val1 -> "first"
data.val3.b -> "third b"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

---

鉴于适合您的解决方案，

item.ev3[0].ev3_4

您的数据存储为具有属性 (ev3) 的对象（项目），其中包含一个数组，其第一个索引 ([0]) 是具有属性 (ev3_4) 的对象。

您对问题的编辑肯定有助于澄清数据的结构。

0:
  ev1 (first name):   joe
  ev2 (lastname):     blow
  ev3 (address):
    0:
      ev3_1 (street number):  1234
      ev3_2 (street name):    main
      ev3_3 (zip code):       12345
      ev3_4 (city):           tempe

但您仍然可以进行一些调整，以极大地提高您处理和跟踪数据的能力。并且可能有助于进一步澄清这些概念。

首先，我强烈建议您为对象键使用清晰的名称。您包含在括号中的内容是完美的，只需使用驼峰格来消除空格即可。 这将使您在编写代码以访问数据（item.address.city 而不是使用 ev3 和 ev3_4 之类的名称）时变得更加容易，并且还有助于使您的代码对于试图遵循您的代码的其他人来说更具可读性。

其次，您将地址数据 (ev3[0]) 作为对象存储在数组内部（因此是 [0]）。 从您所显示的内容来看，您仅使用数组的第一个索引 ([0])。 如果是这种情况，您可以直接将地址对象存储在 ev3 中，这样就无需在访问数据时指定 [0]。

person: {
   firstName: "Joe",
   lastName: "Blow",
   address: {
      streetNumber: "1234"
      streetName: "Main Street",
      zipCode: "90210",
      city: "Fakesville"
   },
   phone: "1(222)333-4444"
}

现在您可以通过以下方式访问您正在寻找的相同数据：

person.address.city

如果您要存储更多人，则可以/应该在数组中完成，然后可以通过索引或循环访问他们。

people = [
  {
    firstName: "Joe",
    lastName: "Blow",
    address: {
      streetNumber: "1234"
      streetName: "Main Street",
      zipCode: "90210",
      city: "Fakesville"
    },
    phone: "1(222)333-4444"
  },{
    firstName: "Rick",
    lastName: "Sanchez",
    address: {
      streetNumber: "132"
      streetName: "Cool Avenue",
      zipCode: "98101",
      city: "Seattle"
    },
    phone: "1(222)333-4444"
  }
]

people[1].address.city -> "Seattle"
people[0].firstName -> "Joe"