Why aren't any images in array?

images
javascript

#1

When I request a list of products I cannot see any img src only id etc

Moltin.Products.All().then((products) => {
    // Do something
});

Get a main image href from single Get A Product request
#2

Hi @joe

Great question! As we adhere to the JSON API specification, you must ask for any relational data using the include syntax. We expose this as With() in the JavaScript SDK.

If you wanted to get all products with main_image you’d do:

const MoltinGateway = require('@moltin/sdk').gateway
​
const Moltin = MoltinGateway({
  client_id: 'X'
})

Moltin.Products.With('main_image').All().then(products => console.log(products))

This will then give you an included object. From this you can get the main_image per product.

Here is an example of the NextJS store that gets all products, filters through the included images and creates a new array of products.

const { json: { data, included: { main_images } } } = await getProducts()

const products = data.map(product => {
  const imageId = product.relationships.main_image
    ? product.relationships.main_image.data.id
    : false

  return {
    ...product,
    image: imageId
      ? main_images.find(img => img.id === imageId).link.href
      : '/static/no-image.svg'
  }
})

  return {
    products
  }

I hope this helps :smile:

PS. You’ll be pleased to hear we’re working on improving our documentation which will ease on-boarding with our SDKs and API. Please free to suggest any guides/documentation in #feedback


Display image with product name and price
#3

To be honest that is overly complex you could just include them in the data object


#4

Hi @joe

As I mentioned previously we follow the JSON API spec. This means we can scale our API and provide a consistent API as we introduce new endpoints.

There are a lot of libraries that make working with JSON API easier. See this list of JavaScript libraries that make working with includes easier.

One of the benefits of JSON API is smaller payloads. If you make a request to get products and include categories, you’ll embed the category data for each product, which isn’t ideal when working with headless APIs, as you want the fastest response possible.

Hopefully this helps :slight_smile:


#5
// get all products
getAllProducts(): Observable < MoltinProduct > {
    const request = this.moltin.Products.With('main_images')

    return from(request.All())
}

Still not seeing the images in relationships>main_image…


#6

Hi @joe

Can you change main_images to main_image?

Thanks :slight_smile:


#7

Sorry no change I see everything just no image


#8

Here is my data

[
{
“type”: “product”,
“id”: “40d4ffac-5a54-4145-9c3d-c15e755bc249”,
“name”: “Rolex Explorer”,
“slug”: “Rolex-Explorer-14270-1997”,
“sku”: “SKU1334”,
“manage_stock”: false,
“description”: “This watch is a Rolex Explorer 14270. It has a 36mm steel case, silver dial & bracelet, and is powered by an automatic movement. Extremely careful in customer satisfaction, we deliver the watch with box, papers and 1 year Watchr guarantee and Watchr Certificate of authenticity by our professional inspectors.”,
“price”: [
{
“amount”: 430000,
“currency”: “GBP”,
“includes_tax”: true
}
],
“status”: “live”,
“commodity_type”: “physical”,
“meta”: {
“timestamps”: {
“created_at”: “2018-04-26T14:34:47+00:00”,
“updated_at”: “2018-04-27T09:27:27+00:00”
},
“display_price”: {
“with_tax”: {
“amount”: 430000,
“currency”: “GBP”,
“formatted”: “£4,300.00”
},
“without_tax”: {
“amount”: 430000,
“currency”: “GBP”,
“formatted”: “£4,300.00”
}
},
“stock”: {
“level”: 0,
“availability”: “out-stock”
}
},
“relationships”: {
“files”: {
“data”: [
{
“type”: “file”,
“id”: “b64fd303-c929-49c5-a385-28441e12e60e”
},
{
“type”: “file”,
“id”: “a36f672a-6d25-4550-af22-93a5db5c7bb8”
}
]
},
“categories”: {
“data”: [
{
“type”: “category”,
“id”: “e2be4c80-2cd5-41e2-b1ef-01da5951634f”
}
]
},
“brands”: {
“data”: [
{
“type”: “brand”,
“id”: “149e3c27-84fd-4605-acfa-eb9f79c3c6b4”
}
]
},
“main_image”: {
“data”: {
“type”: “main_image”,
“id”: “a9747b4d-8666-4f55-8c30-1f368a4db526”
}
}
}
},
{
“type”: “product”,
“id”: “66e339a4-e18f-49cb-a395-04dcbdc8b73d”,
“name”: "Rolex ",
“slug”: “rolex”,
“sku”: “dd”,
“manage_stock”: false,
“description”: “ddd”,
“price”: [
{
“amount”: 500000,
“currency”: “GBP”,
“includes_tax”: true
}
],
“status”: “live”,
“commodity_type”: “physical”,
“meta”: {
“timestamps”: {
“created_at”: “2018-04-23T15:49:11+00:00”,
“updated_at”: “2018-04-27T11:11:23+00:00”
},
“display_price”: {
“with_tax”: {
“amount”: 500000,
“currency”: “GBP”,
“formatted”: “£5,000.00”
},
“without_tax”: {
“amount”: 500000,
“currency”: “GBP”,
“formatted”: “£5,000.00”
}
},
“stock”: {
“level”: 0,
“availability”: “out-stock”
}
},
“relationships”: {
“main_image”: {
“data”: {
“type”: “main_image”,
“id”: “7945e7e6-64b2-4993-9efd-b84f07c026e8”
}
}
}
}
]


#9

Hi @joe

Can you check the response for included.main_images?

You can see my CodePen which illustrates this.

I hope this helps :smile:


#10

I have supplied this above no?


#11

The data above is an array which will be data array inside the object that is returned. If you see my CodePen you’ll see that there is included object which is outside the data array.

:slight_smile:


#12

Hi @joe

Did you get this resolved? :slight_smile:


#13

Yes, I was looking into .data and not the response


#14

Great. Let me know if there’s anything else we can do to help :smile:

Appreciate your honest feedback :+1:


#15

@notrab Hi there, is there anywhere I could find the code to help me with this issue on Swift? I’m having the exact same problem as @joe


#16

Hi @EoghanCasey1 I had to write a helper function to add the images to my object array

function fixImages(result) {
    const data = result.data
    const images = result.included.main_images

    data.forEach(pr => {
        const im = images.find(im => im.id === pr.relationships.main_image.data.id).link.href
        pr.imgUrl = im;
    })

    return data;
}

#17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.