Object map does not return all data

Asked

Viewed 41 times

1

I’m trying to pass a map on an api that should print videos on a website. When he finishes making the map he is not taking the videos of the next category and populating the object. I created the following JSON for testing:

[
    {
        "id": 1,
        "slug": "futebol",
        "name": "Futebol",
        "videos": [
            {
                "id": 1,
                "link": "https://www.youtube.com/watch?v=CWWOW7T82Hw",
                "title": "Dribles mais humilhates da historia",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "futebol",
                        "name": "Futebol"
                    }
                ]
            },
            {
                "id": 2,
                "link": "https://www.youtube.com/watch?v=vOqfupUXkkY",
                "title": "Os movimentos mais bonitos do futebol",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "futebol",
                        "name": "Futebol"
                    }
                ]
            }
        ]
    },
    {
        "id": 29,
        "slug": "cachorro",
        "name": "Cachorro",
        "videos": [
            {
                "id": 3,
                "link": "https://www.youtube.com/watch?v=S-gWb3sV9mY",
                "title": "Videos engraçados de cachorro",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "cachorro",
                        "name": "Cachorro"
                    }
                ]
            },
            {
                "id": 4,
                "link": "https://www.youtube.com/watch?v=Nu5K2IRrsiY",
                "title": "Videos engraçados de cachorro 2",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "cachorro",
                        "name": "Cachorro"
                    }
                ]
            }
        ]
    }
]

And I’m making the following map on the object:

const [videosObject] = videoCategories.map((item) =>
      item.videos.map((obj) => obj),
)

I understood that by unstructuring the object using [videosObject, videosObject2] I can take all the data of the two objects of the array but I wanted to put the 4 video objects that are in the 2 video arrays in only one object of type array with this 4 objects and print this data and I’m not sure which resource I use.

api typescript

  • Your question was not clear, what was the desired result at the end?

  • The end result I expect is only the 4 video objects that are inside the video arrays

2 answers

1


One way you get the result you want and I think the best way, by being simpler, is to create the variable videosObject as being a array and simply make a push with the objects from the videos:

let videoCategories = [{
    "id": 1,
    "slug": "futebol",
    "name": "Futebol",
    "videos": [{
        "id": 1,
        "link": "https://www.youtube.com/watch?v=CWWOW7T82Hw",
        "title": "Dribles mais humilhates da historia",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "futebol",
          "name": "Futebol"
        }]
      },
      {
        "id": 2,
        "link": "https://www.youtube.com/watch?v=vOqfupUXkkY",
        "title": "Os movimentos mais bonitos do futebol",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "futebol",
          "name": "Futebol"
        }]
      }
    ]
  },
  {
    "id": 29,
    "slug": "cachorro",
    "name": "Cachorro",
    "videos": [{
        "id": 3,
        "link": "https://www.youtube.com/watch?v=S-gWb3sV9mY",
        "title": "Videos engraçados de cachorro",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "cachorro",
          "name": "Cachorro"
        }]
      },
      {
        "id": 4,
        "link": "https://www.youtube.com/watch?v=Nu5K2IRrsiY",
        "title": "Videos engraçados de cachorro 2",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "cachorro",
          "name": "Cachorro"
        }]
      }
    ]
  }
]

let videosObject = [];

videoCategories.map(item => item.videos.map(obj => videosObject.push(obj)))

console.log(videosObject)

Now if you want to keep the way you did desestruturando the objects with the videos and keeping in the variables [videosObject, videosObject2], will need another variable and in this new variable join the objects of the videos using Operator spread (...)

let videoCategories = [{
    "id": 1,
    "slug": "futebol",
    "name": "Futebol",
    "videos": [{
        "id": 1,
        "link": "https://www.youtube.com/watch?v=CWWOW7T82Hw",
        "title": "Dribles mais humilhates da historia",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "futebol",
          "name": "Futebol"
        }]
      },
      {
        "id": 2,
        "link": "https://www.youtube.com/watch?v=vOqfupUXkkY",
        "title": "Os movimentos mais bonitos do futebol",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "futebol",
          "name": "Futebol"
        }]
      }
    ]
  },
  {
    "id": 29,
    "slug": "cachorro",
    "name": "Cachorro",
    "videos": [{
        "id": 3,
        "link": "https://www.youtube.com/watch?v=S-gWb3sV9mY",
        "title": "Videos engraçados de cachorro",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "cachorro",
          "name": "Cachorro"
        }]
      },
      {
        "id": 4,
        "link": "https://www.youtube.com/watch?v=Nu5K2IRrsiY",
        "title": "Videos engraçados de cachorro 2",
        "index": false,
        "image": "no-img.jpg",
        "categories": [{
          "slug": "cachorro",
          "name": "Cachorro"
        }]
      }
    ]
  }
]

const [videosObject, videosObject2] = videoCategories.map(item => item.videos.map(obj => obj))

const videos = [...videosObject, ...videosObject2]
console.log(videos)

  • 1

    Dude, this is what I was trying to do and I wasn’t getting it, both your answer and that of Vidio solve the problem, but I’m going to use yours because it’s using the map I wanted. Thank you very much.

1

Way to rescue only the videos is to interact in each position and key copy your videos and transfer to one array example:

const global = [
    {
        "id": 1,
        "slug": "futebol",
        "name": "Futebol",
        "videos": [
            {
                "id": 1,
                "link": "https://www.youtube.com/watch?v=CWWOW7T82Hw",
                "title": "Dribles mais humilhates da historia",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "futebol",
                        "name": "Futebol"
                    }
                ]
            },
            {
                "id": 2,
                "link": "https://www.youtube.com/watch?v=vOqfupUXkkY",
                "title": "Os movimentos mais bonitos do futebol",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "futebol",
                        "name": "Futebol"
                    }
                ]
            }
        ]
    },
    {
        "id": 29,
        "slug": "cachorro",
        "name": "Cachorro",
        "videos": [
            {
                "id": 3,
                "link": "https://www.youtube.com/watch?v=S-gWb3sV9mY",
                "title": "Videos engraçados de cachorro",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "cachorro",
                        "name": "Cachorro"
                    }
                ]
            },
            {
                "id": 4,
                "link": "https://www.youtube.com/watch?v=Nu5K2IRrsiY",
                "title": "Videos engraçados de cachorro 2",
                "index": false,
                "image": "no-img.jpg",
                "categories": [
                    {
                        "slug": "cachorro",
                        "name": "Cachorro"
                    }
                ]
            }
        ]
    }
];
let videos = [];
for(i = 0; i < global.length; i++) {
  videos = [...videos, ...global[i].videos];
}
console.log(videos);

  • Thank you very much for the help, your answer also solves the problem I was having difficulties in solving. I was two days ago trying to solve this problem of logic.

Browser other questions tagged api typescript

You are not signed in. Login or sign up in order to post.