Return an array element inside a nested array

Question

I've got one that I'm not getting too much traction on, Ive got everything working correctly except one element. Essentially I want to filter a return of "ev3_4" in the code. I'm not sure of the correct function. I'm pulling from an external source to get the data. and the info is inside a nested array of the array that I have been able to correctly return.

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

Here is an example of the the array its pulling

(infodata Array)

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

I'd like to help you out, but you're definitely going to need to clarify a lot more. — Air
– Air, Commented Feb 14, 2020 at 23:23
When I put {{ item.ev3 }} the return value pulls in another array, I only want to pull the 4th value (i.e ev3_4) as the return instead of the full array. — Gutters
– Gutters, Commented Feb 14, 2020 at 23:26
Alright. but item.ev3 means that item is an object and not an array. Do you know it will always be the 4th value that you are looking to return? If so you can just say item.ev3 at index 3 (3 not 4, since 0 is the first index), which would be item.ev3[3] — Air
– Air, Commented Feb 14, 2020 at 23:39

Air · Accepted Answer · 2020-02-18 00:22:55Z

Thanks for updating your question. Glad to hear you found a solution to access the data you needed.

Based on your edit, I think there are still some things worth noting. The data you are referring to is actually stored in an object rather than an array (though it does contain an array).

An array has the structure:

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

And the data is accessed by index.

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

Objects, on the other hand, contain properties consisting of key-value pairs. And have the following structure:

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

Object values are accessed using the key.

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

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

Given the solution that worked for you,

item.ev3[0].ev3_4

Your data is stored as an object (item) with a property (ev3) that contains an array whose first index ([0]) is an object that has a property (ev3_4).

Your edit to your question definitely helps to clarify the structure of your data.

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

But there are still some adjustments that you could make that would greatly improve your ability to work with and follow your data. And might help further clarify the concepts.

First, I would highly recommend using clear names for your object keys. What you have included in brackets is perfect, just use camel case to eliminate spaces. This will make things much easier for you when writing code to accesses data (item.address.city as opposed to using names like ev3 and ev3_4), and will also help make your code more readable for others trying to follow your code.

Second, you are storing your address data (ev3[0]) as an object, inside of an array (hence the [0]). From what you have shown, you are only using the first index of the array ([0]). If this is the case you can just store the address object directly inside ev3, which will eliminate the need for you to specify [0] when you access the data.

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

Now you are able to access the same data you were looking to with the following:

person.address.city

And if you have additional people to store, that could/should be done inside an array, where they can then be accessed by their index or in a loop.

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"

Collectives™ on Stack Overflow

Return an array element inside a nested array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related