Index on mux video object, cannot get id from undefined

🆘 Support
1

Hello everyone,

I was trying to populate a video gallery content that I have. But for some reason I cannot get to reach the video url, I noticed that there is no id, inside the video object generated by graphQL, not sure if that should be the reason:
image

So this is my graphQL structure, so I want to reach the mp4URL

image
image1866×1238 214 KB

So this is my component, and this was just a test to get the object array video from my graph that I can reach, however it’s printed in a very weird way.

<div class="s-p-b-5" v-if="videos">
<div class="s-p-1"><div class="flex-horizontal-align-bottom"><div class="paragraph-xxl relative">Videos</div></div></div>
<div v-for="gallery in videos" :key="gallery.id" role="list" > 
<div v-for="svideo in gallery.submitVideos" :key="svideo.id"  class="grid _3-3-2-1 w-dyn-items">

 <div v-for="mux in svideo.video" :key="mux.id" >
<div v-for="link in mux" :key="link.id">

    {{link}}
</div>
</div>
</div>
</div>
</div>

however, if instead of the last nested div:

<div v-for="link in mux" :key="link.id">

    {{link}}
</div>

I replace it for the real component:

<Video
  v-for="link in mux"
  :key="link.id"
  :videoURL="link.mp4Url"
  ></Video>

I got an error “cannot get id from undefined”. I also tried to use the id from mux that brings the graph, just in case. It’s called “muxAssetId”, but I got the same error. Any idea? I was wondering if is because of the missing id. If that’s the case, can I use the url from dato, that one I can reach, but I am not sure if it does have the same perfomance as the one from mux?

Thank you in advance for the help :slight_smile:

2

hi @maria.arce can you please send me your project URL in a direct message to me please?

3

Hi @maria.arce I think you don’t need to v-for more deeper than gallery.subitVideos since that’s the last array you have in the graphql response.

So, try this code

<div class="s-p-b-5" v-if="videos">
    <div class="s-p-1"><div class="flex-horizontal-align-bottom"><div class="paragraph-xxl relative">Videos</div></div></div>
        <div v-for="gallery in videos" :key="gallery.id" role="list" >
            <div v-for="svideo in gallery.submitVideos" :key="svideo.id"  class="grid _3-3-2-1 w-dyn-items">
                <Video :videoURL="svideo.video.mp4Url" ></Video>
            </div>
        </div>
    </div>
</div>
4

Hello faber, thank you very much to take a look into this ; _ ; . After trying this the result was:

image
image1100×206 32.5 KB

I also, to make it easier, and thinking that might be something related to my deep nested component messing around, I just decided to change my query and try with the uploads one(more clean for testing). I also decide to comment my whole component and just use the normal binding to reach the info. This is the result :slight_smile:

image
image2114×1332 341 KB

image
image2158×1242 283 KB

image
image2156×582 188 KB

5

Is it possibile that videos is a String (and not an object) in your first screenshot? That would cause the “Cannot read property ‘0’ of undefined” in the second screen.

6

Thank you faber, this solved the issue, I just removed the JSON.stringify from the videos payload, and now I can reach it : )

1 Like