Vue.js pop a nested object from an array

Question

Working on a quick dashboard and I want to remove the second Object from departments_by_dept_emp. How would this be best achievable with Vue?

HTML

<tbody id="rows" v-for="result in results">
   <tr>
     <td>{{ result.first_name }} {{ result.last_name }}</td>
     <td v-for="department in result.departments_by_dept_emp">{{ department.dept_name }}</td>
     <td>{{ result.hire_date }}</td>
     <td>{{ result.birth_date }}</td>
   </tr>
</tbody>

JavaScript

   {
   "emp_no": 10010,
      "birth_date": "1963-06-01",
      "first_name": "Duangkaew",
      "last_name": "Piveteau",
      "gender": "F",
      "hire_date": "1989-08-24",
      "departments_by_dept_emp": [
        {
          "dept_no": "d004",
          "dept_name": "Production"
        },
        {
          "dept_no": "d006",
          "dept_name": "Quality Management"
        }
      ]
    }

Axios call getting the data is stored in an empty array

data () {
    return {
      results: [],
    }
}

Axios call

getData() {
      this.loading = true

      axios.get('https://url', { 'headers': { 'Api-Key': '' } })
          .then(response => {
            this.results = response.data.resource
            this.next = response.data.meta.next
            this.loading = false
            console.log(response.data.resource)
          })
          .catch(error => {
            console.log(error)
          })
      }

So from the example, essentially I only want the Production department name and remove Quality Management from my table. I do not believe slice() will do the trick as it will only clone one dimension. Also, anything like splice() or findIndex I receive the error "Cannot read property '{example}' of undefined""

Hi, would it be possible to provide examples of what you have already tried?, otherwise it looks like you are trying to get people to write code for you. — J. Pichardo
– J. Pichardo, Commented Apr 2, 2019 at 21:39

Tadeo Hndz · Accepted Answer · 2019-04-02 22:14:07Z

If you only want to display an element from an array you can pass the index of the element to display

var app = new Vue({
  el: '#app',
  data: {
    results:  [{
      "emp_no": 10010,
      "birth_date": "1963-06-01",
      "first_name": "Duangkaew",
      "last_name": "Piveteau",
      "gender": "F",
      "hire_date": "1989-08-24",
      "departments_by_dept_emp": [
        {
          "dept_no": "d004",
          "dept_name": "Production"
        },
        {
          "dept_no": "d006",
          "dept_name": "Quality Management"
        }
      ]
    }]
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <table>
    <tbody id="rows" >
      <tr v-for="result in results">
        <td>{{ result.first_name }} {{ result.last_name }}</td>
        <td>{{ result.departments_by_dept_emp[0].dept_name }}</td>
        <td>{{ result.hire_date }}</td>
        <td>{{ result.birth_date }}</td>
      </tr>
    </tbody>
  </table>
</div>

Hope this works for you.

Joey Wilcher · Accepted Answer · 2019-04-02 22:00:53Z

0

Since vue.js data objects are simply javascript objects, it should be possible to use array.pop().

You should be able to add a function like this to your methods block:

popDept: function() {
   return this.departments_by_dept_emp.pop();
},

This function will both remove the department from the list, and return it.

answered Apr 2, 2019 at 22:00

Joey Wilcher

1

2 Comments

Kevin Over a year ago

Thank you, this was originally the idea. This will not work as this.departments_by_dept_emp does not exist by the way I am storing the results from my axios call like so data () { return { results: [] } }

Joey Wilcher Over a year ago

Ah I see, would you mind including the code for the axios call in the question so that we can provide a better answer?

Andrew1325 · Accepted Answer · 2019-04-02 22:03:38Z

At risk of looking like writing some code for you...

Vue is a javascript framework so you can write functions in plain javascript to find an item in an array and then remove it. So in your template where you iterate through department.dept_name you could add a click listener, @click="removeElement(department.dept_name)"

Then in your script section:

export default {
data: () => ({
  results: {
  "emp_no": 10010,
     "birth_date": "1963-06-01",
     "first_name": "Duangkaew",
     "last_name": "Piveteau",
     "gender": "F",
     "hire_date": "1989-08-24",
     "departments_by_dept_emp": [
       {
         "dept_no": "d004",
         "dept_name": "Production"
       },
       {
         "dept_no": "d006",
         "dept_name": "Quality Management"
       }
     ]
   }
}),
methods: {
  removeElement(x) {
    var ind = this.results.departments_by_dept_emp.findIndex(n => n.dept_name === x)  
    this.results.departments_by_dept_emp.splice(ind, 1)
}

That will remove the object from the array and leave the rest as is.

Collectives™ on Stack Overflow

Vue.js pop a nested object from an array

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related