Return only some object fields in an array using Vue.js

Question

So i have those objects in array from an api request

(5) [{…}, {…}, {…}, {…}, {…}]
0: {ID: 1, Title: "dqdq", Description: "dqdq", IdUser: 3}
1: {ID: 2, Title: "dqdq", Description: "dqdq", IdUser: 3}
2: {ID: 3, Title: "dqdqddd", Description: "dqdq", IdUser: 3}
3: {ID: 4, Title: "dqdqddd", Description: "dqdq", IdUser: 3}
4: {ID: 5, Title: "dqdqddd", Description: "dqdq", IdUser: 3}
length: 5

what i need to have is to take just the Title so i can loop it inside a div and so on for the description and pass it to the child component so i can loop it in the html part

<template>
<div>
<Navbar />
<gamesIdeaList :games="games" />
</div>

</template>

<script>
// @ is an alias to /src
import Navbar from '@/components/Navbar.vue'
import gamesIdeaList from '@/components/gamesIdeaList.vue'
import axios from 'axios'
export default {
  name: 'home',
  components: {
    Navbar,
    gamesIdeaList
  },
  data() {
      return {
          games:[]
      }
  },
  //  props: info,
   mounted () {
    axios.get('http://localhost:3001/GamesIdea', {
        headers: { Authorization: `Bearer ${localStorage.usertoken}` }
      })
      .then(res => {
 this.games = res.data.data

console.log(arr)
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
}
}
</script>

Please try this this.games = res.data.data.map(d=>{Title: d.Title,Description:d.Description}); — Hardik Masalawala
– Hardik Masalawala, Commented Nov 14, 2019 at 10:55

Hardik Masalawala · Accepted Answer · 2019-11-14 11:19:49Z

3

Yes can add field you don't want in return

Solution 1

this.games = res.data.data.map(({
    ID,
    IdUser,
    ...rest
}) => rest);

var v1 = [
{ID: 1, Title: "dqdq", Description: "dqdq", IdUser: 3},
{ID: 2, Title: "dqdq", Description: "dqdq", IdUser: 3},
{ID: 3, Title: "dqdqddd", Description: "dqdq", IdUser: 3},
{ID: 4, Title: "dqdqddd", Description: "dqdq", IdUser: 3},
{ID: 5, Title: "dqdqddd", Description: "dqdq", IdUser: 3}]

var games = v1.map(({
    ID,
    IdUser, ...rest}) => rest);

console.log(games);

Solution 2

https://stackoverflow.com/a/25470077/6923146

You can use map:

this.games = res.data.data.map(obj => {
    Title: obj.Title,
    Description: obj.Description
});

edited Nov 14, 2019 at 11:19

answered Nov 14, 2019 at 10:59

Hardik Masalawala

1,0769 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hardik Masalawala Over a year ago

@anabel please check answer it's updated with new solution

ana bel Over a year ago

its working all the solution provided are working , thank you so much

Hardik Masalawala Over a year ago

@anabel, Please accept my answer If it's working fine for you. Thank you.

ALOK VERMA · Accepted Answer · 2019-11-14 10:49:38Z

you can Try this also

<div>
<Navbar />
<gamesIdeaList :games="games" />
</div>

</template>

<script>
// @ is an alias to /src
import Navbar from '@/components/Navbar.vue'
import gamesIdeaList from '@/components/gamesIdeaList.vue'
import axios from 'axios'
export default {
  name: 'home',
  components: {
    Navbar,
    gamesIdeaList
  },
  data() {
      return {
          games:[]
      }
  },
  //  props: info,
   mounted () {
    axios.get('http://localhost:3001/GamesIdea', {
        headers: { Authorization: `Bearer ${localStorage.usertoken}` }
      })
      .then(res => {
 this.games = res.data.map(val => {
return {
Title: val.Title,
Description:val.Description}
})

console.log(arr)
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
}
}
</script>```

Boussadjra Brahim · Accepted Answer · 2019-11-14 10:54:11Z

2

Try to use map array function as follows :

 this.games = res.data.data.map(d=>{Title: d.Title,Description:d.Description});

edited Nov 14, 2019 at 10:54

answered Nov 14, 2019 at 10:42

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

ana bel Over a year ago

indeed its working , so i pass two props one for title and one for description ?

Boussadjra Brahim Over a year ago

do you want to pass both title and description to the child component?

Collectives™ on Stack Overflow

Return only some object fields in an array using Vue.js

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related