Возврат элемента массива во вложенном массиве

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 ammount 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 seperate 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

И если у вас есть дополнительные люди для хранения, это можно / нужно сделать внутри массива, где они могут быть доступны по их индексу или в al oop.

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"