Using custom field values with Qwik

Technical Questions
1

Hello

I am a beginner working in Builder with Qwik.

I was following this tutorial on Custom Fields.

I got stuck when I got to the “Using field values in your code” section as there are no Qwik code examples.

Can anyone please provide example codes on how to get custom fields values with Qwik?
I would like to learn how to display the values in components and use them in queries.

Thank you.

2

Hi @justine04, Welcome to Builder.io Forum!

I recommend checking out our doc and a few forum posts on Qwik with the builder:

For video help on the builder.io Qwik app, we recommend you check out Qwik Presentations, Talks, Videos and Podcasts

Let us know if you have any further questions or concerns. Thank you!

3

Hi @garima

Thank you so much for the helpful links, after reading through I was able to use the model custom fields in my Qwik code.

All the other fields, like text, image etc, are displaying fine.
However, I got stuck when trying to display a List custom field.
Using the code below I got the error: content.data.map is not a function

I have attached screenshots of my list custom field and the error.

May you kindly help me resolve this error, I have tried so many combinations of the map() and I am unable to display list items.

Thanks.

export default component$(() => {

const location = useLocation();

const builderContentRsrc = useResource$<any>(() => {
    return getContent({
      model: BUILDER_MODEL,
      apiKey: apiKey,
      options: getBuilderSearchParams(location.query),
      userAttributes: {
        urlPath: location.pathname || "/",
      },
    });
  });

  return (
    <Resource
      value={builderContentRsrc}
      onPending={() => <div>Loading...</div>}
      onRejected={() => <div>Error</div>}
      onResolved={(content) => (
        <>
        <RenderContent
          model={BUILDER_MODEL}
          content={content}
          apiKey={apiKey}
        />

        <h1>{content.data.projectTitle}<h1>

        <p>{content.data.projectDescription}<p>

        <ul role="list" >
          {content.data.map((imageGallery:any, index:any) => (
            <li key={index}>
              <div >
                <img src={imageGallery.galleryItem} alt=""  />
              </div>
            </li>
          ))}              
        </ul>
        
        </>
      )}
    />
  );
});

type EndpointData = BuilderContent | null;

export const onGet: RequestHandler<EndpointData> = async ({ request, response }) => {
  const url = new URL(request.url);

  const data = await getContent({
    model: BUILDER_MODEL,
    apiKey: apiKey,
    userAttributes: { urlPath: url.pathname },
  });
  
};

list custom field
list custom field1630×2228 51.1 KB

error
error1742×502 20.4 KB

4

Hi @justine04,

To solve the error, console.log the value you’re calling the map() method on, and make sure to only call map on valid arrays means before using map method {console.log(content.data)} and check how data looks like and apply code accordingly or share console code with us so I can suggest some tweaks in code to make it work.

5

Hi @garima

Thanks for getting back to me.
I added {console.log(content.data)} and this was my result.

{
  clientName: 'Client Name',
  description: 'SEO Meta Description - Aliquam sodales, sapien ac tincidunt egestas, ipsum nulla scelerisque mi, quis vulputate sem dui eget mauris.',
  image: 'https://cdn.builder.io/api/v1/image/assets%2F93d21f93faa94675bf81a34904d70ec3%2F5239d5c2e9f14a3cacc9482dbca2b9c6',
  imageGallery: [
    {
      galleryItem: 'https://cdn.builder.io/api/v1/image/assets%2F93d21f93faa94675bf81a34904d70ec3%2F5239d5c2e9f14a3cacc9482dbca2b9c6'
    },
    {
      galleryItem: 'https://cdn.builder.io/api/v1/image/assets%2F93d21f93faa94675bf81a34904d70ec3%2F5239d5c2e9f14a3cacc9482dbca2b9c6'
    },
    {
      galleryItem: 'https://cdn.builder.io/api/v1/image/assets%2F93d21f93faa94675bf81a34904d70ec3%2F5239d5c2e9f14a3cacc9482dbca2b9c6'
    }
  ],
  installationDate: 1675872000000,
  projectDescription: '<p>Maecenas viverra accumsan metus, id mollis eros rutrum ut. Nulla ut vehicula quam. Integer non neque ut est posuere eleifend ac et lorem. Mauris felis nisl, placerat vel eros non, blandit viverra enim.</p>',
  themeId: false,
  title: 'Test Project',
  url: '/projects/test-project'
}
6

@justine04 Thanks for sharing the result. Now the error makes sense to me as the content.data returning object and map only works on the array. So you can replace your code with the below code:-

<ul role="list">
        {content.data.imageGallery.map((image, index) => (
          <li key={index}>
            <div>
              <img src={image.galleryItem} alt="" />
            </div>
          </li>
        ))}
</ul>

Hope this solves your issue, feel free to reach out if you have further questions or issue persists!

7

Hi @garima.
Thank you so much, that solved my issue. :slight_smile:

1 Like