Data structure for the photo picker?

[BTBTravis]

Hey @golovnevs what how should we structure the data for styles/photos in the photopicker?

Perhaps each styles/photos should be an object? What keys would it have? If one has an array of these style objects how could they figure out which fashion to recommend at the end?

[golovnevs]

Hello, Travis! Here is the Initial draft of the data structure and logic. Outfit object properties:

• outfit id
• URL to the outfit photo // where the photo is stored
• rank // stores user selection and is used for the resulting
• displayedCounter //displayed times counter
• items // array of clothing items used for the outfit
• tags // array of tags
 Items array:
  • Id of an item
  • URL to an online store

Example:

let outfits = [{ outfitId: 1, imgSrc: 'images/1.jpg', rank: 1, rejectedCounter:0; items: [whiteSneakers, blackSkinnyJeans] tags: [sport, classic] } outfitId: 2, imgSrc: 'images/2.jpg', rank: 2, rejectedCounter:0; items: [ blueBoyfriendJeans, whiteShirt] , tags: [romantic] } ]; let links = [{ itemId: whiteSneakers,
itemUrl:'https://en.zalando.de/catalogue/?q=white+t-shirts' }, { itemId: blueBoyfriendJeans, itemUrl:'https://en.zalando.de/catalogue/?q=blue+jeans' }, { itemId: blackSkinnyJeans, itemUrl:'https://en.zalando.de/catalogue/?q=black+jeans' } ];

Process: 

The quiz displays outfit pairs. User clicks on the preferred outfit -> preferred outfit stays and not preferred is substituted by a different one (i.e. preferred outfit is displayed until the user picks another one).
Preferred outfit gets +1 to its rank every time when gets a click. 
Next outfit is being chosen randomly from the rest, but if it was not preferred 3 times, it is not suggested anymore
 After 20 pairs displayed OR when all outfits have been rejected 3+ times, final page is loaded and result is calculated. 

Result: top 3 preferred outfits - sorted by ranks
Below the outfits there is a list of all items used for them (duplicates are excluded but if there was a duplicated, it is highlighted in the resulting set as most likely relevant item)
Every item in the list is an external link to the online store

Every photo is clickable - then items used for this specific outfit get underlined.

[MrTim]

For me it sounds like tags and items are kinda the same entity. If it is like that then the data structure could be

{
  id: 123,
  imgUrl: 'image/outfitWithSomenameOrMaybeId',
  rank: 0, // it's better to start from 0 since we count from 0 in js :) 
  shown: 2, // could be displayedCounter, or could be in separate array
  items: [{
     id: 321,
     url: 'online.store.com',
     tag: 'Jeans with purple buttons', // dunno what it is:)
     name: 'some name',
     ... // any additional data you need
  },{
     ...
  }, ...]
}

I think this could be structure. When you would create your layout you would have all data already available in the object.

And take a look at this link https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks This would help you structure the comment better)