Add JSON on active Page

[SohaibAshraf1]

I'm getting template json and the image's url in response to an api. I supplied the image url to the ImagesGrid's getPreview method. However, in order to use them as a template, I now want to give the template json. But I'm not sure how can i achieve it. Is there any way to pass template json to imagesGrid.

here is the code:

  <ImagesGrid
                images={images}
                getPreview={(image) => window.location.origin + '/' + image.image}
                onSelect={async(image, pos) => {
                    const { width, height } = await getImageSize(window.location.origin + '/' + image.template_json);
                    await store.activePage?.addElement({
                        src: window.location.origin + '/' + image.template_json, width, height,
                        x: pos ? pos.x : store.width / 2 - width / 2,
                        y: pos ? pos.y : store.height / 2 - height / 2,
                    });
                }}
                rowsNumber={2}
                loadMore={true}
                isLoading={isLoading}

            />

Response of Api:

[lavrton]

Your image item has template_json property with full information. Just use it inside onSelect, like this:

                onSelect={async(image, pos) => {
                   const json = JSON.parse(image.template_json);
                   store.loadJSON(json);
                }}