Get array data in a function

Question

I am trying to extract the data in an array, however, it seems I am not doing it right, but when i console log it, I can see all the data. I want to be able to extract only all the titles in the array. Kindly show me where I am getting it wrong.

      const movies = [
       {
         title: 'Show stopper',
         rate: 5,
         runtime: 120,
         information: 'Show stopper is available',
       },
       {
         title: 'Drive through',
         rate: 233,
         runtime: 65,
         information: 'Drive through is not available',
       },
      ];

        componentDidMount() {
          this.getItemValues();
        }

        getItemValues = () => {
          const { title, rate } = movies;

          console.log(title, rate);
        }

Can you share the context of this code? Is it inside of a class/component? — Tristan
– Tristan, Commented Nov 20, 2019 at 21:50
Your movies variable is an array with objects in it. Your destructuring declaration indicates that you want to get the values of the properties "title" and "rate", but the array has no such properties. The objects in the array do, but you'd have to iterate through the array and do something with each object individually. — Pointy
– Pointy, Commented Nov 20, 2019 at 21:52

Julio Peguero · Accepted Answer · 2019-11-22 02:40:06Z

1

Movies is an array not, just one object with the keys title and rate. You could iterate through the elements of the array using a for loop or a forEach. For example:

getItemValues = () => {
  movies.forEach((element) => console.log(element.title, element.rate));
}

That would print out all your titles and rates. You are close to doing what you want, just keep in mind the type of what you are sending into variables and functions.

To answer your question: you could

let titles = [];
getItemTitles = () {
   movies.forEach((movie) => titles.push(movie.title);)
}

edited Nov 22, 2019 at 2:40

answered Nov 20, 2019 at 22:07

Julio Peguero

1902 silver badges4 bronze badges

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

Comments

Nerdpuff · Accepted Answer · 2019-11-20 22:01:33Z

0

Pointy is right.

You can't destructure an array like that.

You'd need to iterate over your array and store the values.

movies.map(e => {   
    return {
    title: e.title, 
    rate: e.rate 
    }
})

answered Nov 20, 2019 at 22:01

Nerdpuff

4996 silver badges13 bronze badges

Comments

Tom O. · Accepted Answer · 2019-11-20 22:37:57Z

Read up on Array.prototype.map - this without a doubt the easiest way to achieve your objective:

const movies = [{
  title: 'Show stopper',
  rate: 5,
  runtime: 120,
  information: 'Show stopper is available',
}, {
  title: 'Drive through',
  rate: 233,
  runtime: 65,
  information: 'Drive through is not available',
}];

const titles = movies.map(movie => movie.title);

console.log(titles)

Therefore, using this approach, your React code would look something like this:

componentDidMount() {
    this.getItemValues();
}

getItemValues = () => {
    const titles = movies.map(movie => movie.title);
    console.log(titles);
}

FYI: Object destructuring and Array destructuring, while similar, use different syntaxes and should be used properly. In your code, you are attempting to destructure an array using object destructuring syntax which will not work as you expect).

xtrycatchx · Accepted Answer · 2019-11-21 02:28:31Z

0

You can try this:

componentDidMount() {
    const titles = this.getItemValues();
    console.log(titles);
}

getItemValues = () => movies.map(movie => movie.title);

answered Nov 21, 2019 at 2:28

xtrycatchx

3544 silver badges11 bronze badges

Collectives™ on Stack Overflow

Get array data in a function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related