Problem with prismic configuration

Developing with Prismic
1

hello prismic people :slight_smile:

I have this problem with my repository and I cannot identify what is causing it...

im trying to access to the image url of a link to another document that contains an image:

img.collections_gallery_media_image(alt=product.products_product.data.image.alt src=product.products_product.data.image.url)

but i keep getting the error Cannot read property 'image' of undefined

when i look at the JSON of the document the url is not there...
"image" : {

  •  "type" : "Image",*

  •  "config" : {*

  •    "constraint" : { },*

  •    "thumbnails" : [ ],*

  •    "label" : "Image"*

  •  }*

i know its something to do with my prismic configuration because i tried with other person that is doing the same tutorial and my code worked in his repository but i cant find what is wrong with it... everything seems fine to me.

I have been three days by now trying to solve this so any help would be much appreciated.

happy sunday to everyone :sparkling_heart:

2

Hey, have you tried logging the entire response of the document?
What's the API ID of your Image field?

1 Like
4

sorry I dont understand what does this means im new to prismic :cold_sweat: :cold_sweat: :cold_sweat:

I also dont know what is the API ID of the image field

5

No problem, thank you for pointing it out to me. I can guide you in all the steps.

An API ID is a name you give to a content field in a Custom Type. This is the name you'll use to access the data of the field in the code. In your case, maybe the field is called image.

What I meant by "logging the response" was, when you query your documents from your repository, you get the response and you can log the response in the browser or with a console.log to see what the object looks like.

  • Can you tell me more about what you need to retrieve?
  • Is this image field inside another linked document?
  • Could you show me the query you're making?
1 Like
6

ohh right! yeah the api id of my image is image!

So, i have this document called Collections with a three links to another element called Product.
Im using PUG for the HTML so I'm trying to access to the Product image url from the collections.pug

this is collections.pug

extends ../base.pug

block variables

  - var template = 'collections'

block content

 .collections

   .collections_wrapper

     .collections_gallery

       .collections_gallery_wrapper

         each collection in collections

           each product in collection.data.products

             a.collections_gallery_link

               figure.collections_gallery_media

                 img.collections_gallery_media_image(alt=product.products_product.data.image.alt src=product.products_product.data.image.url)`Preformatted text`

this is the request from the app.js:

app.get('/collections', async (req, res) => {

  const api = await  initApi(req)

  const meta = await api.getSingle('meta')

  // const home = await api.getSingle('home')

  // const  preloader = await api.getSingle('preloader')

  const{results: collections} = await api.query(Prismic.Predicates.at('document.type', 'collection'),{

  fetchLinks: 'product.image'

})

  res.render('pages/collections',{

  collections,

  meta

  })

})

the result of loggin the app in my browser is

TypeError: D:\hdb\views\pages\collections.pug:12
10| .collections_gallery_wrapper
11| each collection in collections

12| each product in collection.data.products
13| a.collections_gallery_link
14| figure.collections_gallery_media
15| img.collections_gallery_media_image(alt=product.products_product.data.image.alt src=product.products_product.data.image.url)

Cannot read property 'length' of undefined
at eval (eval at wrap (D:\hdb\node_modules\pug-runtime\wrap.js:6:10), :104:32)
at eval (eval at wrap (D:\hdb\node_modules\pug-runtime\wrap.js:6:10), :127:4)
at eval (eval at wrap (D:\hdb\node_modules\pug-runtime\wrap.js:6:10), :166:4)
at template (eval at wrap (D:\hdb\node_modules\pug-runtime\wrap.js:6:10), :168:177)
at Object.exports.renderFile (D:\hdb\node_modules\pug\lib\index.js:418:38)
at Object.exports.renderFile (D:\hdb\node_modules\pug\lib\index.js:408:21)
at View.exports.__express [as engine] (D:\hdb\node_modules\pug\lib\index.js:455:11)
at View.render (D:\hdb\node_modules\express\lib\view.js:135:8)
at tryRender (D:\hdb\node_modules\express\lib\application.js:640:10)
at Function.render (D:\hdb\node_modules\express\lib\application.js:592:3)

7

if I console log console.log(collections[2]) i get :

 {
[0]   id: 'YPqvghAAACAA4qLV',
[0]   uid: 'onde-collection',
[0]   url: null,
[0]   type: 'collection',
[0]   href: 'https://heroesdebarrio.cdn.prismic.io/api/v2/documents/search?ref=YP8aZRAAACIAbArV&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22YPqvghAAACAA4qLV%22%29+%5D%5D',
[0]   tags: [],
[0]   first_publication_date: '2021-07-23T12:15:46+0000',
[0]   last_publication_date: '2021-07-26T20:26:13+0000',
[0]   slugs: [ 'vita', 'vita-collection' ],
[0]   linked_documents: [],
[0]   lang: 'es-es',
[0]   alternate_languages: [],
[0]   data: {
[0]     description: 'The fluid movement of the elements of this collection joins the soft shapes of the filigree, that look like floating in the structures. The repetition of the waves creates big but incredibly light earrings, comfortable to wear because almost imperceptible.',
[0]     title: [ [Object] ],
[0]     product: [ [Object], [Object], [Object] ]
[0]   }
[0] }

then is try to access the product with console.log(collections[2].data.product), this is the result:

0] [
[0]   {
[0]     products_product: {
[0]       id: 'YPqruBAAACAA4pGX',
[0]       type: 'product',
[0]       tags: [],
[0]       slug: 'silver-necklace',
[0]       lang: 'es-es',
[0]       first_publication_date: '2021-07-23T11:45:03+0000',
[0]       last_publication_date: '2021-07-24T08:50:01+0000',
[0]       uid: 'silver-necklace',
[0]       data: [Object],
[0]       link_type: 'Document',
[0]       isBroken: false
[0]     }
[0]   },
[0]   {
[0]     products_product: {
[0]       id: 'YPvSQxAAACAA5zJs',
[0]       type: 'product',
[0]       tags: [],
[0]       slug: 'gold-necklace',
[0]       lang: 'es-es',
[0]       first_publication_date: '2021-07-24T08:41:42+0000',
[0]       last_publication_date: '2021-07-24T08:41:42+0000',
[0]       uid: 'gold-necklace',
[0]       data: [Object],
[0]       link_type: 'Document',
[0]       isBroken: false
[0]     }
[0]   },
[0]   {
[0]     products_product: {
[0]       id: 'YPqruBAAACAA4pGX',
[0]       type: 'product',
[0]       tags: [],
[0]       slug: 'silver-necklace',
[0]       lang: 'es-es',
[0]       first_publication_date: '2021-07-23T11:45:03+0000',
[0]       last_publication_date: '2021-07-24T08:50:01+0000',
[0]       uid: 'silver-necklace',
[0]       data: [Object],
[0]       link_type: 'Document',
[0]       isBroken: false
[0]     }
[0]   }
[0] ]

but i cant find the image url that i was looking with
src=product.products_product.data.image.url

8

There's a missing array function to loop through collections[2].data.product I think.
Have you tried checking if there's actually data inside each product?
What happens if you log this:

console.log(collections[2].data.product[0].products_product.data),
1 Like
9

it worked! thanks a lot for your help !
:)


{
[0]   image: {
[0]     dimensions: { width: 555, height: 783 },
[0]     alt: 'image',
[0]     copyright: null,
[0]     url: 'https://images.prismic.io/heroesdebarrio/45e031c5-9040-4f85-8787-4f06f60ca999_2.jpg?auto=compress,format&rect=0,1,1360,1919&w=555&h=783'
[0]   }
[0] }
10

Hi @Pau ! i keep having this problem because i want to iterate through all the products, and its just work if i selct one of the like product[0] ... is there a way i can select all of them without getting undefined error?

11

Hey there!

You'll need to map the array with a v-for directive. Check out Vue's official docs

12

This thread has been closed due to inactivity. Flag to reopen.