프론트엔드/Javascript

자바스크립트 문법 7 - 배열(Array) 의 다양한 메서드 1 (검색과 조회)

syleemomo 2021. 12. 27. 07:02
728x90

 

* 배열 검색  - indexOf, lastIndexOf, find, findIndex, includes, filter, some, every

 

[배열].indexOf(검색할 요소, 검색 시작 위치)

배열의 indexOf 메서드는 첫번째 인자로 검색할 배열요소가 들어간다. 두번째 인자로는 검색을 시작할 인덱스 위치값을 설정하면 된다. 검색할 요소를 찾으면 해당요소의 인덱스값을 반환하고, 검색에 실패하면 -1 을 반환한다. 

const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat']

const searchedAnimal = animals.indexOf('cat')

console.log(searchedAnimal)

animals 라는 배열에서 'cat' 이라는 배열요소를 검색하고 있다. 'cat' 은 현재 animals 배열에서 두군데 존재하지만 첫번째에 위치한 값만 반환한다. 만약 두번째 'cat' 을 찾으려면 아래와 같이 검색위치를 추가하면 된다.

const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat']

const searchedAnimal = animals.indexOf('cat', 3)

console.log(searchedAnimal)

'giraffe' 라는 동물은 animals 배열에 존재하지 않으므로 -1 을 반환한다. 

const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat']

const searchedAnimal = animals.indexOf('giraffe')

console.log(searchedAnimal)

 

만약 cat 이라는 동물 이름이 여러번 나오고, 해당 동물을 모두 검색하려면 아래와 같이 하면 된다. 

const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat', 'giraffe', 'duck', 'cat']
const animalToSearch = 'cat'
const searchedIndexes = []

let foundIndex = animals.indexOf(animalToSearch)
while(foundIndex != -1){
    searchedIndexes.push(foundIndex)
    foundIndex = animals.indexOf(animalToSearch, foundIndex+1)
}

console.log(searchedIndexes)

indexOf 의 반환값이 -1 이 아닌 동안 반복문을 순회하면서 계속 검색하면 된다. 검색 시작위치는 해당 요소를 찾을때마다 찾은 위치에서 1을 증가시킨 다음 다시 검색하면 된다. 'cat' 을 찾을때마다 searchedIndexes 라는 배열에 찾은 위치를 추가한다. 

function updateVegetablesCollection(veggies, veggie) {
  if (veggies.indexOf(veggie) === -1) {
    veggies.push(veggie)
    console.log(`새로운 veggies 컬력션은 ${veggies}`)
  } else {
    console.log(`${veggie}는 이미 veggies 컬렉션에 존재합니다.`)
  }
}

const veggies = ["potato", "tomato", "chillies", "green-pepper"]

updateVegetablesCollection(veggies, "spinach")
updateVegetablesCollection(veggies, "spinach")

해당 코드는 배열에 추가하려는 배열요소가 없으면 추가하고, 존재하면 추가하지 않는다.

 

let str = 'Widget with id'

console.log( str.indexOf('Widget') ) // 0, str은 'Widget'으로 시작함
console.log( str.indexOf('widget') ) // -1, indexOf는 대·소문자를 따지므로 원하는 문자열을 찾지 못함

console.log( str.indexOf("id") ) // 1, "id"는 첫 번째 위치에서 발견됨 (Widget에서 id)

문자열도 배열이기 때문에 indexOf 메서드를 이용하여 부분 문자열을 검색할 수 있다. 검색에 실패하면 -1 을 반환한다.

let str = 'Widget with id';

console.log( str.indexOf('id', 2) ) // 12

검색 시작지점을 indexOf 메서드의 두번째 인자로 전달할 수 있다. 해당 코드는 id 가 두번째로 등장하는 인덱스 위치를 반환한다.

let str = "Widget with id";

if (str.indexOf("Widget")) {
    console.log("찾았다!"); // 의도한 대로 동작하지 않습니다.
}

해당 조건문은 거짓이기 때문에 실행되지 않는다. 이유는 Widget 이 포함된 위치는 인덱스 0인데 0은 falsy 값이므로 조건문을 만족하지 못한다. 

let str = "Widget with id";

if (str.indexOf("Widget") !== -1) {
    console.log("찾았다!"); // 의도한 대로 동작하지 않습니다.
}

의도한대로 동작하려면 위와 같이 -1과 비교하면 된다. 검색에 실패하면 -1이므로 -1이 아니라는 것은 검색에 성공하였다는 의미다.

 

[배열].lastIndexOf(검색할 요소, 검색 시작 위치)

배열의 lastIndexOf 메서드는 첫번째 인자로 검색할 배열요소가 들어간다. 두번째 인자로는 검색을 시작할 인덱스 위치값을 설정하면 된다. 검색할 요소를 찾으면 해당요소의 인덱스값을 반환하고, 검색에 실패하면 -1 을 반환한다. indexOf 와의 차이점은 검색 시작 위치로부터 거꾸로(배열의 인덱스가 감소하는 방향으로) 검색한다. 

const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat']

const searchedAnimal = animals.lastIndexOf('cat')

console.log(searchedAnimal)

animals 라는 배열에서 'cat' 이라는 배열요소를 검색하고 있다. 'cat' 은 현재 animals 배열에서 두군데 존재하지만 두번째에 위치한 값만 반환한다. 배열의 끝에서부터 검색하기 때문이다. 만약 첫번째 'cat' 을 찾으려면 아래와 같이 검색위치를 추가하면 된다.

const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat']

const searchedAnimal = animals.lastIndexOf('cat', 3)

console.log(searchedAnimal)

 

[배열].find(판별함수)
// 판별함수
function 판별함수이름(배열요소, 인덱스, 배열){
	return 판별조건
}

배열의 find 메서드는 인자로 판별함수가 들어간다. 판별함수는 콜백함수로써 반복문에서 배열요소를 조회하듯 각각의 배열요소를 꺼내서 판별조건을 만족하는지 검사한다. 판별조건을 처음으로 만족하는 배열요소의 값을 반환한다. 만약 그런 요소가 없다면, undefined 를 반환한다. 

판별함수의 첫번째 인자로는 각각의 배열요소가 순서대로 주입된다. 두번째 인자는 현재 주입된 배열요소의 인덱스 값이다. 세번째 인자는 find 메서드를 호출한 배열이다. 두번째, 세번째 인자는 옵션이다. 

const fruits = ['apple', 'banana', 'orange', 'watermelon']

function longest(element){
    return element.length > 6
}
const found = fruits.find(longest)

console.log(found)

위 코드는 과일에 대한 fruits 배열에서 각각의 과일이름을 꺼내서 과일이름이 6글자보다 긴 배열요소를 반환한다. 현재로는 watermelon 이 유일하다. 

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
]

function isCherries(fruit) {
  return fruit.name === "cherries"
}

console.log(inventory.find(isCherries))
// { name: 'cherries', quantity: 5 }

해당 코드는 배열 안의 객체들을 하나씩 순회하면서 객체의 name 프로퍼티값이 "cherries" 인 첫번째 객체를 검색한다. 

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
]

const result = inventory.find(({ name }) => name === "cherries")

console.log(result) // { name: 'cherries', quantity: 5 }

화살표 함수와 구조분해(destructuring assignment)를 사용한 코드는 위와 같다. { name } 은 각 객체에서 name 속성만 뽑아서 name 변수에 복사한다. 

function isPrime(element, index, array) {
  let start = 2
  while (start <= Math.sqrt(element)) {
    if (element % start === 0) {
      return false
    }
    start++
  }
  return element > 1
}

console.log([4, 6, 8, 12].find(isPrime)) // undefined, 소수 없음
console.log([4, 5, 8, 12].find(isPrime)) // 5
console.log([4, 7, 12, 13].find(isPrime)) // 7

해당 코드는 배열에서 첫번째 소수를 검색한다. 

 

[배열].findIndex(판별함수)
// 판별함수
function 판별함수이름(배열요소, 인덱스, 배열){
	return 판별조건
}

배열의 findIndex 메서드는 인자로 판별함수가 들어간다. 판별함수는 콜백함수로써 반복문에서 배열요소를 조회하듯 각각의 배열요소를 꺼내서 판별조건을 만족하는지 검사한다. 판별조건을 처음으로 만족하는 배열요소의 인덱스 값을 반환한다. 만약 그런 요소가 없다면,  -1 을 반환한다.

const fruits = ['apple', 'banana', 'orange', 'watermelon']

function longest(element){
    return element.length > 6
}
const found = fruits.findIndex(longest)

console.log(found)

위 코드는 과일에 대한 fruits 배열에서 각각의 과일이름을 꺼내서 과일이름이 6글자보다 긴 배열요소를 반환한다. 현재로는 watermelon 이 유일하다. 그래서 watermelon 에 대한 인덱스 3을 반환한다. 

function isPrime(element) {
  if (element % 2 === 0 || element < 2) { // 2로 나눠서 떨어지는 수는 짝수이므로 소수가 아님
    return false
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) { // 홀수만 검사함 (3의 배수, 5의 배수, 7의 배수)
    if (element % factor === 0) {
      return false
    }
  }
  return true
}

console.log([4, 6, 8, 9, 12].findIndex(isPrime)) // -1, not found
console.log([4, 6, 7, 9, 12].findIndex(isPrime)) // 2 (array[2] is 7)

해당 코드는 배열에서 첫번째로 찾은 소수의 인덱스값을 반환한다. 먼저 짝수인지 검사하고, 한번 필터링한다. 다음에는 홀수들의 배수인지 검사한다. 해당 조건을 통과하면 소수로 판단한다. 

 

[배열].includes(검색할 값)

배열의 includes 메서드는 배열이 인자로 주어진 값을 배열요소로 가지고 있는지 판단한다. 반환값은 true 나 false 와 같은 논리값이다. 

const seasons = ['spring', 'summer', 'autumn', 'winter']

console.log(seasons.includes('summer')) // true
console.log(seasons.includes('cat')) // false

위 코드는 seasons 배열에서 summer 라는 문자열을 배열요소로 가지고 있는지 검사한다. cat 은 포함하고 있지 않으므로 false 를 반환한다. 

const title = 'Haprry potter'

console.log(title.includes('potter')) // true

위 코드는 영화제목(title) 에서 potter 이라는 부분 문자열을 포함하고 있는지 검사한다. 문자열도 배열이므로 includes 메서드를 사용할 수 있다. 

console.log( "Widget with id".includes("Widget") ) // true
console.log( "Hello".includes("Bye") ) // false

부분 문자열의 위치는 필요하지 않고, 단순히 부분 문자열의 포함여부만 알고 싶은 경우에도 includes 메서드를 사용할 수 있다. 

console.log( "Widget".includes("id") ); // true
console.log( "Widget".includes("id", 3) ); // false, 세 번째 위치 이후엔 "id"가 없습니다.

includes 의 두번째 인자에는 검색 시작지점을 설정할 수 있다. 

const arr = ["a", "b", "c"]

console.log(arr.includes("c", 3)) // false
console.log(arr.includes("c", 100)) // false

includes 메서드의 두번째 인자값이 배열의 길이보다 크거나 같으면 검색은 실패한다. 

// 배열 길이는 3
// fromIndex는 -100
// 계산된 인덱스는 3 + (-100) = -97

const arr = ["a", "b", "c"]

console.log(arr.includes("a", -100)) // true
console.log(arr.includes("b", -100)) // true
console.log(arr.includes("c", -100)) // true
console.log(arr.includes("a", -2)) // false

계산된 인덱스가 검색을 시작할 배열의 위치로 사용된다. 계산된 인덱스가 0보다 작거나 같으면 전체 배열에서 검색이 된다. 

 

[배열].filter(판별함수)
const words = ['car', 'paper', 'mobile', 'computer', 'school', 'sun', 'house']

function isShort(word){
    return word.length < 5
}

const wordsFiltered = words.filter(isShort)

console.log(wordsFiltered)

배열의 filter 메서드는 인자로 판별함수가 들어간다. 판별함수는 콜백함수로써 반복문에서 배열요소를 조회하듯 각각의 배열요소를 꺼내서 판별조건을 만족하는지 검사한다. 판별조건을 만족하는 모든 배열요소를 모아서 새로운 배열로 반환한다. 위 코드는 words 배열에서 단어의 길이가 5보다 작은 모든 배열요소로 새로운 배열을 만들어 반환한다.

const words = ['car', 'paper', 'mobile', 'computer', 'school', 'sun', 'house']

function isShort(word){
    if(word.length < 5) return true
    else return false
}

const wordsFiltered = words.filter(isShort)

console.log(wordsFiltered)

이전 코드는 위와 같이 작성해도 동일하게 동작한다. isShort 이라는 판별함수에서 판별조건을 만족하면 true 를 반환하고, 만족하지 못하면 false 를 반환한다. 이렇게 하면 조건을 만족하는 배열요소는 새로운 배열에 추가되고, 만족하지 못하는 배열요소는 걸러진다. 

function isBigEnough(value) {
  return value >= 10
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough)
// 필터링된 값은 [12, 130, 44]

해당 코드는 배열에서 값이 10미만인 숫자는 전부 걸러낸다. 

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

function isPrime(num) {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false
    }
  }
  return num > 1
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

해당 코드는 배열에서 소수만 추출해서 새로운 배열을 반환한다. 

const fruits = ["apple", "banana", "grapes", "mango", "orange"]

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(arr, query) {
  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()))
}

console.log(filterItems(fruits, "ap")) // ['apple', 'grapes']
console.log(filterItems(fruits, "an")) // ['banana', 'mango', 'orange']

해당 코드는 fruits 배열에서 검색단어(키워드)를 포함하는 배열원소만 찾아서 새로운 배열에 담아 반환한다. 

const arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { id: "undefined" },
]

let invalidEntries = 0

function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true
  }
  invalidEntries++
  return false
}

const arrByID = arr.filter(filterByID)

console.log("필터링된 배열\n", arrByID)
// 필터링된 배열
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("유효하지 않은 항목의 수 =", invalidEntries)
// 유효하지 않은 항목의 수 = 5

해당 코드는 서버에서 가져온 데이터 목록에서 ID 값을 검사한다. ID 값이 0이거나 숫자가 아닌 값이면 filter 메서드로 걸러낸다. Number.isFinit 메서드는 숫자이면 true 값을 반환하고 숫자가 아니면 false 를 반환한다.  

 

[배열].some(판별함수)
const numbers = [32, 6, 4, 13, 9, 57]

function isMultiplyByThree(element){
    return element % 3 === 0
}

console.log(numbers.some(isMultiplyByThree))

배열의 some 메서드는 인자로 판별함수가 들어간다. 판별함수는 콜백함수로써 반복문에서 배열요소를 조회하듯 각각의 배열요소를 꺼내서 판별조건을 만족하는지 검사한다. 배열요소 중 어느 하나라도 판별함수의 판별조건을 만족하면 반환값이 true 이다. 빈 배열은 무조건 false 를 반환한다. 

function isBiggerThan10(element, index, array) {
  return element > 10
}

console.log([2, 5, 8, 1, 4].some(isBiggerThan10)); // false
console.log([12, 5, 8, 1, 4].some(isBiggerThan10)); // true

배열의 some 메서드를 사용하여 배열에서 10보다 큰 수가 하나라도 있는지 검사한다. 

console.log([2, 5, 8, 1, 4].some(x => x > 10)); // false
console.log([12, 5, 8, 1, 4].some(x => x > 10)); // true

화살표 함수를 사용하면 훨씬 더 코드가 간결해진다.

const fruits = ["apple", "banana", "mango", "guava"]

function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal)
}

console.log(checkAvailability(fruits, "kela")) // false
console.log(checkAvailability(fruits, "banana")) // true

해당 코드는 배열에서 검색단어(키워드)를 배열요소로 가지고 있는지 검사한다. 즉, some 메서드를 이용하여 배열의 includes 메서드를 모방한 것이다.

const TRUTHY_VALUES = [true, "true", 1]

function getBoolean(value) {
  if (typeof value === "string") {
    value = value.toLowerCase().trim()
  }

  return TRUTHY_VALUES.some((t) => t === value)
}

console.log(getBoolean(false)) // false
console.log(getBoolean("false")) // false
console.log(getBoolean(1)) // true
console.log(getBoolean("true")) // true

해당코드는 getBoolean 함수의 인자값이 TRUTHY_VALUES 배열에 하나라도 존재하는지 검사한다. 

 

[배열].every(판별함수)
const numbers = [32, 6, 4, 13, 9, 57]

function isMultiplyByThree(element){
    return element % 3 === 0
}

console.log(numbers.every(isMultiplyByThree))

배열의 every 메서드는 인자로 판별함수가 들어간다. 판별함수는 콜백함수로써 반복문에서 배열요소를 조회하듯 각각의 배열요소를 꺼내서 판별조건을 만족하는지 검사한다. 배열요소 모두 판별함수의 판별조건을 통과해야만 true 를 반환한다. 빈 배열은 무조건 true 를 반환한다. 

const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element))

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])) // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])) // false

해당 코드는 every 메서드를 이용하여 두번째 배열이 첫번째 배열의 서브셋인지 검사한다. 두번째 배열요소를 하나씩 조회하면서 첫번째 배열에 있는지 검사한다. 두번째 배열의 모든 배열원소가 첫번째 배열에 존재하면 두번째 배열은 첫번째 배열의 서브셋이다.

 

 

* 반복문(for 문)을 사용하지 않는 배열요소 조회 및 처리 - forEach, map

 

[배열].forEach(배열요소 각각에 대해 실행할 콜백함수)

배열의 forEach 메서드는 배열요소 각각에 대하여 인자로 주어진 콜백함수를 실행한다. 반환값은 undefined 이다. 

const currentTime = [3, 8, 23] // 시, 분, 초
const timeStr = []

function addZero(time){
    timeStr.push(`${time < 10 ? '0' + time : time}`)
}

currentTime.forEach(addZero)

console.log('********* CURRENT TIME *********')
console.log(timeStr.join(':'))
console.log('***********************************')

위 코드는 배열의 forEach 메서드를 사용해서 현재 시간을 보기 좋게 출력한다. 즉, 데이터를 재가공한다. 

 

const userIDs = ['victoria', 'sun', 'johseb', 'syleemomo', 'hannah', 'shara', 'martin', 'gorgia', 'nana', 'dannel']

console.log('********* USER EMAIL LIST *********')
function addDotCom(userID){
    console.log(userID + '@gmail.com')
}

userIDs.forEach(addDotCom)
console.log('***********************************')

위 코드는 배열의 forEach 메서드를 사용해서 사용자 ID 정보로부터 사용자 연락처를 만들어 출력한다. 즉, 데이터를 재가공한다. 

사용자 ID 정보를 이용해서 사용자 연락처로 가공한 모습

const ratings = [5, 4, 5]
let sum = 0

const sumFunction = (a, b) => a + b

ratings.forEach((rating) => {
  sum = sumFunction(sum, rating)
})

console.log(sum)

해당 코드는 forEach 메서드를 이용하여 평점의 합계를 계산한다.

const items = ["item1", "item2", "item3"]
const copyItems = []

// 전
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i])
}

// 후
items.forEach((item) => {
  copyItems.push(item)
});

for 반복문을 forEach 메서드와 비교하면 위와 같다.

const logArrayElements = (element, index /*, array */) => {
  console.log(`a[${index}] = ${element}`)
};

// 배열에서 해당 위치에 항목이 없으므로
// 인덱스 2가 건너뛰어진 것을 확인할 수 있습니다.
[2, 5, , 9].forEach(logArrayElements)
// 로그:
// a[0] = 2
// a[1] = 5
// a[3] = 9

forEach 메서드는 for 반복문과 달리 배열에 항목이 없으면 건너띄고, 다음 배열요소를 조회한다.

const words = ["one", "two", "three", "four"]
words.forEach((word) => {
  console.log(word)
  if (word === "two") {
    words.shift() //'one'은 배열에서 삭제됩니다.
  }
}) // one // two // four

console.log(words) // ['two', 'three', 'four']

forEach 메서드는 배열의 복사본을 만들지 않는다. 즉, forEach 메서드 실행중에 해당 배열이 변경되면, 변경된 배열 그대로 다음 배열요소를 꺼내서 실행한다. 해당 코드는 word 가 "two"일때 "one"이 삭제되고, words 배열은 ["two", "three", "four"] 가 된다. 해당 배열에서 1번 인덱스값인 "two"를 이미 조회하였으므로 그 다음 2번 인덱스값인 "four"를 조회하게 된다. 즉, "three"는 콘솔에 출력되지 않는다. 

const flatten = (arr) => {
  const result = []
  arr.forEach((item) => {
    if (Array.isArray(item)) {
      result.push(...flatten(item))
    } else {
      result.push(item)
    }
  })
  return result
}

// 사용법
const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
console.log(flatten(nested)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

해당 코드는 forEach 메서드와 재귀함수를 이용하여 중첩배열을 평탄화하는 작업을 수행한다. 즉, 1차원 배열이 반환된다. 

 

[새로운 배열] = [배열].map(배열요소 각각에 대해 실행할 콜백함수)

배열의 map 메서드는 배열요소 각각에 대하여 인자로 주어진 콜백함수를 실행한다. 그런 다음 실행한 결과로 변경된 배열요소들을 모아서 새로운 배열로 반환한다. 

const numbers = [1, 2, 3, 4, 5]

function multiplyByThree(n){
    return n * 3
}

const numbersRefined = numbers.map(multiplyByThree)
console.log(numbersRefined)

위 코드는 배열의 map 메서드를 사용해서 원본배열인 numbers 로부터 3의 배수로 이루어진 새로운 배열인 numbersRefined 를 반환한다. 

var numbers = [1, 4, 9]
var roots = numbers.map(Math.sqrt)
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

해당 코드는 배열의 map 메서드를 이용하여 배열원소의 제곱근을 계산하고, 결과값이 저장된 새로운 배열을 반환한다.

 

const userEmails = [
    'victoria@gmail.com',
    'sun@gmail.com',
    'johseb@gmail.com',
    'syleemomo@gmail.com',
    'hannah@gmail.com',
    'shara@gmail.com',
    'martin@gmail.com',
    'gorgia@gmail.com',
    'nana@gmail.com',
    'dannel@gmail.com'
]

function removeDotCom(userEmail){
    return userEmail.split('@')[0]
}

function displayUserID(userID){
    console.log(userID)
}

const userIDs = userEmails.map(removeDotCom)

console.log('********* USER ID LIST *********')
userIDs.forEach(displayUserID)
console.log('********************************')

위 코드는 배열의 map 메서드를 사용해서 사용자 연락처(이메일)가 저장된 배열인 userEmails 로부터 사용자 ID 로 이루어진 새로운 배열인 userIDs 를 반환한다. 즉, forEach 예제와 정반대로 데이터를 재가공한다. 

var kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
]

var reformattedArray = kvArray.map(function (obj) {
  var rObj = {}
  rObj[obj.key] = obj.value
  return rObj
})
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

해당 코드는 배열의 객체들을 하나씩 조회하면서 새로운 객체형태로 재가공한다. 

const text = "Hello World"
const result = Array.from(text).map(function (letter) {
  return letter.charCodeAt(0)
})
console.log(result)
// a는 이제 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

해당 코드는 문자열 각각의 글자를 순서대로 조회하면서 해당 글자의 아스키코드 값을 새로운 배열에 저장한다. text 는 문자열이므로 map 메서드를 사용할 수 없지만, Array.from() 메서드를 이용하여 배열로 변경해주면 사용이 가능하다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 연습</title>
    <link rel='stylesheet' href='style.css'/>
</head>
<body>
    <input type="text" class="user-input" placeholder="사용자 아이디">
    <input type="text" class="user-input" placeholder="사용자 비밀번호">
    <input type="text" class="user-input" placeholder="사용자 닉네임">
    <script src="app.js"></script>
</body>
</html>
const inputs = document.querySelectorAll(".user-input");
const results = inputs.map(function(input) {
  return input.value
})
console.log(results)

해당 코드는 콘솔창에서 확인해보면 에러가 발생한다. 이유는 inputs 는 엄격히 따지면 배열이 아니라 DOM 객체들로 구성된 유사배열이기 때문이다. 유사배열을 배열로 변경해서 해당 코드가 동작하게 하려면 아래와 같이 코드를 수정해주면 된다.

const inputs = document.querySelectorAll(".user-input");
const results = Array.from(inputs).map(function(input) {
  return input.value
})
console.log(results)

이렇게 하면 모든 입력창의 값을 읽어서 results 배열에 저장할 수 있다. 

const inputs = document.querySelectorAll(".user-input");

function getInputValues(){
  const results = Array.from(inputs).map(function(input) {
    return input.value
  })
  console.log(results)
}
for(let input of inputs){
  input.addEventListener('input', getInputValues)
}

물론 사용자가 입력창에 뭔가를 타이핑할때마다 모든 입력창의 값을 조회하려면 위와 같이 코드를 수정해주면 된다. 

 

무료 Icon 사이트

 

🍔 Food & Drink Emoji Meanings

 

emojipedia.org

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 연습</title>
    <link rel='stylesheet' href='style.css'/>
</head>
<body>
    <div id="root"></div>
    <script src="app.js"></script>
</body>
</html>

index.html 파일을 위와 같이 작성하자!

#root{
    width: 200px;
    margin: 100px auto;
    text-align: left;
}

style.css 파일을 위와 같이 작성하자!

const fruits = ['apple', 'banana', 'peach', 'strawberry', 'watermelon']
const icons = ['🍎', '🍌', '🍑', '🍓', '🍉']
const rootDiv = document.getElementById('root')

function addIcons(fruit, index){
    const item = document.createElement('div')
    item.innerText = `${icons[index]} ${fruit}`
    return item
}

function displayFruits(fruit){
    console.log(fruit)
    rootDiv.appendChild(fruit)
}



const fruitsRefined = fruits.map(addIcons)

fruitsRefined.forEach(displayFruits)

app.js 파일을 위와 같이 작성하자! 위 코드는 배열의 map 메서드를 사용하여 fruits 배열과 icons 배열을 합쳐서 DOM 객체로 이루어진 새로운 배열을 반환한다. 즉, 문자열로 이루어진 배열로부터 DOM 객체로 이루어진 새로운 배열로 뎅터를 재가공한 것이다.

fruits 배열에 아이콘을 추가하고 화면에 출력한 모습

 

 

 

 

* 연습과제 1

다음은 수능 금지곡인 슈퍼주니어의 쏘리쏘리 노래 가사이다. 해당 가사에서 'Sorry' 와 '부셔' 가 각각 몇번 반복되는지 화면에 출력해보자.

배열의 indexOf 메서드를 사용하고, 여러번 사용할 수 있도록 searchWord 라는 함수로 구현한다. searchWord 함수의 첫번째 인자로는 검색할 단어가 들어오고, 두번째 인자로는 검색할 단어의 길이를 전달받는다. 반환값은 단어의 반복 횟수이다. 

const lyrics = `
Sorry Sorry Sorry Sorry
내가 내가 내가 먼저
네게 네게 네게 빠져
빠져 빠져 버려 baby
Shawty Shawty Shawty Shawty
눈이 부셔 부셔 부셔
숨이 막혀 막혀 막혀
내가 미쳐 미쳐 baby
바라보는 눈빛 속에
눈빛 속에 나는 마치
나는 마치 뭐에 홀린 놈
이젠 벗어나지도 못해
걸어오는 너의 모습
너의 모습 너는 마치
내 심장을 밟고 왔나봐
이젠 벗어나지도 못해
어딜 가나 당당하게
웃는 너는 매력적
착한 여자 일색이란
생각들은 보편적
도도하게 거침 없게
정말 너는 환상적
돌이킬 수 없을만큼
네게 빠져 버렸어
Sorry Sorry Sorry Sorry
내가 내가 내가 먼저
네게 네게 네게 빠져
빠져 빠져 버려 baby
Shawty Shawty Shawty Shawty
눈이 부셔 부셔 부셔
숨이 막혀 막혀 막혀
내가 미쳐 미쳐 baby
딴딴 딴따다 따 따란딴
딴딴 딴따다 따
네게 반해버렸어 baby
딴딴 딴따다 따 따란딴
딴딴 딴따다 따 따라빠빠라
Hey girl gir gir gir gir girl i
눈만뜨면 니 생각 Hey girl
자나깨나 사실 너 하나 밖에 안보여
말해봐 니 맘에 내가
말해봐 자리 잡았는지
말해줘 내게 말해줘
나는 바보 바보 바보
주변 사람들은 말해
내가 너무 적극적
이 세상에 그런 사람
어디 한둘이냐고
그걸 몰라 그녈 몰라
시기하며 하는 말
내가 부럽다면 그건
그대들이 지는 거
Sorry Sorry Sorry Sorry
내가 내가 내가 먼저
네게 네게 네게 빠져
빠져 빠져 버려 baby
Shawty Shawty Shawty Shawty
눈이 부셔 부셔 부셔
숨이 막혀 막혀 막혀
내가 미쳐 미쳐 baby
딴딴 딴따다 따 따란딴
딴딴 딴따다 따
네게 반해버렸어 baby
딴딴 딴따다 따 따라라라
딴딴 딴따다 따 따라빠빠라
Lets dance dance dance dance
Lets dance dance dance dance
Lets dance dance dance dance dance dance
Hey 이제 그만 내게 와줄래
정말 미칠 것만 같아 yeah
난 너만 사랑하고 싶어
절대 다시 한눈 팔 생각 없어 hey hey hey.
애인이라기보다 친구같은
내가 되고 싶어
너의 모든 고민 슬픔
함께 간직하고파
다시 없을 만큼 만큼
너를 너무 사랑해
내가 바란 사람 니가 바로 그
That that that girl
Sorry Sorry Sorry Sorry
내가 내가 내가 먼저
네게 네게 네게 빠져
빠져 빠져 버려 baby
Shawty Shawty Shawty Shawty
눈이 부셔 부셔 부셔
숨이 막혀 막혀 막혀
내가 미쳐 미쳐 baby
`
const keyword1 = 'Sorry'
const keyword2 = '부셔'

function searchWord(keyword, n){
	// 구현하기
}

console.log(searchWord(keyword1, keyword1.length))
console.log(searchWord(keyword2, keyword2.length))

 

* 연습과제 2

아래 movies 배열에서 영화 발매일이 2005년과 2010년 사이 영화중 첫번째로 검색되는 영화를 추출해보자. find 메서드를 사용하고, 반환값은 객체이다. 

const movies = [
    {title: 'Harry Potter', release: '2003-02-22'}, 
    {title: 'Indiana Jhones', release: '2009-01-09'}, 
    {title: 'Jurassic Park', release: '2007-04-13'},
    {title: 'Iron man', release: '2012-12-18'},
    {title: 'Spider man', release: '2017-03-07'}
]

// 구현하기

 

* 연습과제 3

아래 movies 배열에서 영화 제목에 man 이라는 단어가 포함된 영화중 첫번재로 검색되는 영화를 추출해보자! find 메서드를 사용하고, 반환값은 객체이다. 

const movies = [
    {title: 'Harry Potter', release: '2003-02-22'}, 
    {title: 'Indiana Jhones', release: '2009-01-09'}, 
    {title: 'Jurassic Park', release: '2007-04-13'},
    {title: 'Iron man', release: '2012-12-18'},
    {title: 'Spider man', release: '2017-03-07'}
]

// 구현하기

 

* 연습과제 4

아래 movies 배열에서 2010년 이전에 발매되었고, 영화 제목의 첫글자가 J로 시작하는 영화를 추출해보자! find 메서드를 사용하고, 반환값은 객체이다. 

const movies = [
    {title: 'Harry Potter', release: '2003-02-22'}, 
    {title: 'Indiana Jhones', release: '2009-01-09'}, 
    {title: 'Jurassic Park', release: '2007-04-13'},
    {title: 'Iron man', release: '2012-12-18'},
    {title: 'Spider man', release: '2017-03-07'}
]

문자열에서 startsWith 메서드를 이용하면 인자로 주어진 문자(캐릭터)로 시작하는지 판별할 수 있다. 

문자열.startsWith(시작문자)

 

* 연습과제 5

아래 words 배열에서 a 가 한번 이상 들어가는 모든 단어를 출력해보자!

const words = [
    'abc',
    'animal',
    'fruit',
    'abba',
    'abcba',
    'location',
    'radar',
    'madam',
    'mario',
    'level'
]

 

API 데이터 주소

 

* 연습과제 6

아래 코드는 어느 API 서버로부터 화장품에 대한 제품 정보들을 가져온다. 

const API_URL = 'http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline' 

fetch(API_URL)
.then(function(res){
    return res.json()
})
.then(function(products){
    console.log(products)

    // 조건에 맞는 상품을 검색하는 코드 구현하기
})

상품 유형(product_type) 이 mascara 이고, 가격(price) 이 10달러 미만인 모든 화장품에 대한 정보(객체)를 검색해보자! 결과는 아래와 같다. 

검색된 화장품 정보들

 

* 연습과제 7 

아래 코드는 어느 API 서버로부터 화장품에 대한 제품 정보들을 가져온다. 

const API_URL = 'http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline' 

fetch(API_URL)
.then(function(res){
    return res.json()
})
.then(function(products){
    // console.log(products)

    // 조건에 맞는 상품을 검색하는 코드 구현하기
})

상품 유형(product_type) 이 lipstick 이고, 평점(rating) 이 4점과 5점 사이인 모든 화장품에 대한 정보(객체)를 검색해보자! 결과는 아래와 같다. 

async function getData(url) {
    const res = await fetch(url, {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "tasty.p.rapidapi.com",
            "x-rapidapi-key": "31276411cfmsh0efd07dc2760712p136b67jsnbcdc93b074f2"
        }
    })
    return await res.json()
}

getData("https://tasty.p.rapidapi.com/recipes/auto-complete?prefix=chicken%20soup")
    .then(data => {
        console.log(data)
    })

자바스크립트 최신문법인 async, await 키워드를 사용하면 비동기 프로그램을 동기적으로 실행할 수 있으며, 서버에서 데이터를 가져올때 위와 같이 해도 된다. 

검색된 화장품 정보들

 

* 연습과제 8

다음은 SNS 에 등록된 나의 친구목록이다. 친구목록에서 현재 서울에 살고 있고, 나이가 서른 미만인 친구들만 찾아보자!

const friends = [
    {name: 'victoria', age: 13, city: 'seoul'},
    {name: 'sun', age: 34, city: 'busan'},
    {name: 'johseb', age: 25, city: 'busan'},
    {name: 'syleemomo', age: 9, city: 'seoul'},
    {name: 'hannah', age: 41, city: 'daegu'},
    {name: 'shara', age: 37, city: 'seoul'},
    {name: 'martin', age: 28, city: 'daegu'},
    {name: 'gorgia', age: 39, city: 'seoul'},
    {name: 'nana', age: 24, city: 'busan'},
    {name: 'dannel', age: 19, city: 'seoul'},
]

// 구현하기

조건에 맞는 친구들이 검색된 화면

 

* 연습과제 9

다음은 SNS 에 등록된 나의 친구목록이다. 친구목록에서 city 프로퍼티를 기준으로 친구들이 사는 지역을 분류해보자!

const friends = [
    {name: 'victoria', age: 13, city: 'seoul'},
    {name: 'sun', age: 34, city: 'busan'},
    {name: 'johseb', age: 25, city: 'busan'},
    {name: 'syleemomo', age: 9, city: 'seoul'},
    {name: 'hannah', age: 41, city: 'daegu'},
    {name: 'shara', age: 37, city: 'seoul'},
    {name: 'martin', age: 28, city: 'daegu'},
    {name: 'gorgia', age: 39, city: 'seoul'},
    {name: 'nana', age: 24, city: 'busan'},
    {name: 'dannel', age: 19, city: 'seoul'},
]

// 구현하기

친구들을 city 기준으로 분류한 모습

 

* 연습과제 10

다음은 SNS 에 등록된 나의 친구목록이다. 친구목록에서 나보다 나이가 많은 친구들이 한명이라도 있는지 알고 싶다. 나의 현재 나이는 40세이고, 나보다 나이가 많은 친구가 있는지 알아내보자! true 나 false 를 출력하면 된다.

const friends = [
    {name: 'victoria', age: 13, city: 'seoul'},
    {name: 'sun', age: 34, city: 'busan'},
    {name: 'johseb', age: 25, city: 'busan'},
    {name: 'syleemomo', age: 9, city: 'seoul'},
    {name: 'hannah', age: 41, city: 'daegu'},
    {name: 'shara', age: 37, city: 'seoul'},
    {name: 'martin', age: 28, city: 'daegu'},
    {name: 'gorgia', age: 39, city: 'seoul'},
    {name: 'nana', age: 24, city: 'busan'},
    {name: 'dannel', age: 19, city: 'seoul'},
]

// 구현하기

 

* 연습과제 11

다음은 어느 IT 회사에 등록된 사용자 목록이다. 나이(age)가 0 보다 작거나 실수인 유효하지 않은 정보를 가진 사용자가 존재한다. 또한, 연락처(email)에 @가 존재하지 않거나 .com 으로 끝나지 않은 사용자도 존재한다. 이러한 유효하지 않은 사용자 정보를 걸러내보자! 결과는 캡쳐화면과 같다.

const users = [
    {name: 'victoria', age: 13, city: 'seoul', email: 'victoria@gmail.com'},
    {name: 'sun', age: 34, city: 'busan', email: 'sun@gmail.com'},
    {name: 'johseb', age: 25, city: 'busan', email: 'johseb@gmail'},
    {name: 'syleemomo', age: 9.23, city: 'seoul', email: 'syleemomo@nate.com'},
    {name: 'hannah', age: 41, city: 'daegu', email: 'hannah0923*gmail.com'},
    {name: 'shara', age: 37, city: 'seoul', email: 'shara@gmail.com'},
    {name: 'martin', age: -34, city: 'daegu', email: 'martin@gmail.com'},
    {name: 'gorgia', age: 39, city: 'seoul',  email: 'gorgia@gmail.com'},
    {name: 'nana', age: 24, city: 'busan', email: 'nana@gmail.com'},
    {name: 'dannel', age: 19, city: 'seoul', email: 'dannel@gmail.com'},
]

// 구현하기

유효하지 않은 사용자 정보를 걸러낸 결과

 

* 연습과제 12

연습과제 6번에 사용한 OPEN API 데이터를 사용하여 웹 화면에 아래와 같이 출력해보자! 

 

웹 화면 구현에 사용한 코드 일부분은 아래와 같다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 연습</title>
    <link rel='stylesheet' href='style.css'/>
</head>
<body>
    <div id="root"></div>
    <script src="app.js"></script>
</body>
</html>
#root{
    width: 60%;
    margin: 100px auto;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.product{
    flex: 200px;
    height: 500px;
    box-shadow: 1px 1px 5px 5px peru;
    color: white;
    background: peru;
    margin: 10px;
    overflow: hidden;
}
.product-img{
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.product-img img{
    width: 100%;
    height: 100%;
}
.product-name{
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
}
.product-description{
    font-weight: 400;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 15px;
}
const API_URL = 'http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline' 

// 상품 정보에 대한 배열로부터 웹화면에 보여줄 DOM 객체로 이루어진 배열로 변환하기
// product 객체의 image_link, name, price, description 프로퍼티 사용하기
function buildElement(product){
    // 구현하기
}

// DOM 객체로 이루어진 배열을 사용하여 웹 화면에 상품 정보 보여주기
function displayProduct(product){
   // 구현하기
}

fetch(API_URL)
.then(function(res){
    return res.json()
})
.then(function(products){
    console.log(products)

    // 상품 정보에 대한 배열로부터 웹화면에 보여줄 DOM 객체로 이루어진 배열로 변환하기
    const productsRefined = products.map(buildElement)
    
    // DOM 객체로 이루어진 배열을 사용하여 웹 화면에 상품 정보 보여주기
    productsRefined.forEach(displayProduct)
})

위 코드는 OPEN API 로부터 가져온 배열(products) 로부터 웹화면에 보여줄 DOM 객체로 이루어진 배열(productsRefined) 로 변환한 후에 상품 정보를 보여준다. 데이터 재가공을 위하여 map 메서드를 사용하고, 화면에 보여주기 위하여 forEach 메서드를 사용하였다.

(힌트 : map 메서드를 사용하여 Icon 을 추가하는 예제코드를 참고하기)

 

화장품 OPEN API 데이터

// 20220104171703
// http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline

[
  {
    "id": 495,
    "brand": "maybelline",
    "name": "Maybelline Face Studio Master Hi-Light Light Booster Bronzer",
    "price": "14.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/991799d3e70b8856686979f8ff6dcfe0_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-face-studio-master_88837.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Face Studio Master Hi-Light Light Boosting bronzer formula has an expert \nbalance of shade + shimmer illuminator for natural glow. Skin goes \nsoft-lit with zero glitz.\n\n\t\tFor Best Results: Brush over all shades in palette and gently sweep over \ncheekbones, brow bones, and temples, or anywhere light naturally touches\n the face.\n\n\t\t\n\t\n\n                    ",
    "rating": 5.0,
    "category": null,
    "product_type": "bronzer",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:36:15.012Z",
    "updated_at": "2017-12-23T21:08:50.624Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/495.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/495/original/open-uri20171223-4-9hrto4?1514063330",
    "product_colors": [
      
    ]
  },
  {
    "id": 488,
    "brand": "maybelline",
    "name": "Maybelline Fit Me Bronzer",
    "price": "10.29",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/d4f7d82b4858c622bb3c1cef07b9d850_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-fit-me-bronzer_31265.html",
    "website_link": "https://well.ca",
    "description": "Why You'll Love It\n\nLightweight pigments blend easily and wear evenly\nProvides a natural, fade-proof bronzed color that leaves skin the way it was meant to be...fresh, breathing and natural\n\nFor Best Results: For soft, natural look, brush along cheekbone, sweeping upward.",
    "rating": 4.5,
    "category": null,
    "product_type": "bronzer",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:36:05.584Z",
    "updated_at": "2017-12-23T21:08:49.985Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/488.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/488/original/open-uri20171223-4-deo82c?1514063329",
    "product_colors": [
      {
        "hex_value": "#CF9978",
        "colour_name": "Medium Bronze "
      }
    ]
  },
  {
    "id": 477,
    "brand": "maybelline",
    "name": "Maybelline Facestudio Master Contour Kit",
    "price": "15.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/4f731de249cbd4cb819ea7f5f4cfb5c3_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-facestudio-master-contour_120303.html?cat=328",
    "website_link": "https://well.ca",
    "description": "Maybelline Facestudio Master Contour Kit is the ultimate on the go all-in-one palette, with contouring brush included.  Define and highlight in a New York minute with this effortless 3-step face contouring kit.  This easy-to-use 3-step face contouring kit features a bronzer, blush and highlighter.",
    "rating": null,
    "category": null,
    "product_type": "bronzer",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:35:40.504Z",
    "updated_at": "2017-12-23T21:08:48.157Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/477.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/477/original/open-uri20171223-4-1m8bc4v?1514063328",
    "product_colors": [
      {
        "hex_value": "#9B7163",
        "colour_name": null
      },
      {
        "hex_value": "#D78A89",
        "colour_name": null
      },
      {
        "hex_value": "#DBB7A9",
        "colour_name": null
      }
    ]
  },
  {
    "id": 468,
    "brand": "maybelline",
    "name": "Maybelline Face Studio Master Hi-Light Light Booster Blush",
    "price": "14.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/4621032a92cb428ad640c105b944b39c_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-face-studio-master_88831.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Face Studio Master Hi-Light Light Boosting blush formula has an expert \nbalance of shade + shimmer illuminator for natural glow. Skin goes \nsoft-lit with zero glitz.\n\n\t\tFor Best Results: Brush over all shades in palette and gently sweep over \ncheekbones, brow bones, and temples, or anywhere light naturally touches\n the face.\n\n\t\t\n\t\n\n                    ",
    "rating": null,
    "category": "powder",
    "product_type": "blush",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:35:27.706Z",
    "updated_at": "2017-12-23T21:08:47.102Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/468.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/468/original/open-uri20171223-4-sz64re?1514063327",
    "product_colors": [
      
    ]
  },
  {
    "id": 452,
    "brand": "maybelline",
    "name": "Maybelline Face Studio Master Hi-Light Light Booster Blush ",
    "price": "14.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/e8c59b78ebeaec5c4b6aeba49a9ff0f6_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-face-studio-master_88836.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Face Studio Master Hi-Light Light Boosting blush formula has an expert \nbalance of shade + shimmer illuminator for natural glow. Skin goes \nsoft-lit with zero glitz.\n\n\t\tFor Best Results: Brush over all shades in palette and gently sweep over \ncheekbones, brow bones, and temples, or anywhere light naturally touches\n the face.\n\n\t\t\n\t\n\n                    ",
    "rating": 5.0,
    "category": "powder",
    "product_type": "blush",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:35:07.476Z",
    "updated_at": "2017-12-23T20:51:17.460Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/452.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/452/original/open-uri20171223-4-1pmofky?1514062277",
    "product_colors": [
      
    ]
  },
  {
    "id": 439,
    "brand": "maybelline",
    "name": "Maybelline Fit Me Blush",
    "price": "10.29",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/53d5f825461117c0d96946e1029510b0_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-fit-me-blush_31269.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Fit Me Blush has lightweight pigments blend easily and wear evenly. It provides a natural, fade-proof cheek color that leaves skin the way it was meant to be...fresh, breathing, and natural.\n\nFor Best Results: For soft, natural look, brush along cheekbone, sweeping upward.",
    "rating": 4.8,
    "category": "powder",
    "product_type": "blush",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:34:46.302Z",
    "updated_at": "2017-12-23T21:08:45.097Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/439.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/439/original/open-uri20171223-4-1max36x?1514063325",
    "product_colors": [
      {
        "hex_value": "#FB8684",
        "colour_name": "Deep Coral  "
      },
      {
        "hex_value": "#F27988",
        "colour_name": "Deep Rose "
      },
      {
        "hex_value": "#C94A50",
        "colour_name": "Deep Wine "
      },
      {
        "hex_value": "#FFAAAF",
        "colour_name": "Light Rose "
      },
      {
        "hex_value": "#FC9D8F",
        "colour_name": "Medium Coral  "
      },
      {
        "hex_value": "#E89890",
        "colour_name": "Medium Nude "
      },
      {
        "hex_value": "#FF93A0",
        "colour_name": "Medium Pink "
      }
    ]
  },
  {
    "id": 414,
    "brand": "maybelline",
    "name": "Maybelline Dream Bouncy Blush",
    "price": "11.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/51eacb9efebbaee39399e65ffe3d9416_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-dream-bouncy-blush_50689.html",
    "website_link": "https://well.ca",
    "description": "Now, blush has bounce! Freshest flush ever:• New bouncy texture is formulated with silicone elastomers• Lightweight like a powder, yet melts seamlessly into skin like a cream giving you a fresh flush• Dermatologist tested• Allergy tested• Non-comedogenic\n                    \n                    \n                    \n                        \n                        For best results: With your fingertips, blend a small amount of\n blush onto the apples of your cheeks, applying from your cheekbones to \nyour temples. To build colour intensity, apply more blush. \n                    ",
    "rating": 4.5,
    "category": "cream",
    "product_type": "blush",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:34:17.251Z",
    "updated_at": "2017-12-23T21:08:40.418Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/414.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/414/original/open-uri20171223-4-cjvuw0?1514063320",
    "product_colors": [
      {
        "hex_value": "#ecc3d5",
        "colour_name": "Fresh Pink "
      },
      {
        "hex_value": "#ee9cb1",
        "colour_name": "Hot Tamale "
      },
      {
        "hex_value": "#ecbaba",
        "colour_name": "Peach Satin "
      },
      {
        "hex_value": "#c25159",
        "colour_name": "Plum Wine "
      }
    ]
  },
  {
    "id": 398,
    "brand": "maybelline",
    "name": "Maybelline Color Sensational Lipliner",
    "price": "8.29",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/6607c1b7eb717dfbd3c228b61e4c5148_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-sensational_14541.html",
    "website_link": "https://well.ca",
    "description": "Keep your Maybelline lip color beautiful with matching lip liners that won't smudge, smear or bleed for smooth, defined lips. For best results: Line your lips starting in the center of your upper lip. Work from the \ncenter to outer edges of your lips using small strokes, following the \ncontour of your mouth. Follow the same technique for your bottom lip. To\n extend the wear of your favorite lip color or lip gloss, first fill in \nyour lips completely with lip liner. ",
    "rating": 3.5,
    "category": null,
    "product_type": "lip_liner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:33:39.513Z",
    "updated_at": "2017-12-23T21:08:35.034Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/398.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/398/original/open-uri20171223-4-11xbwij?1514063314",
    "product_colors": [
      {
        "hex_value": "#A15638",
        "colour_name": "Nude "
      },
      {
        "hex_value": "#7B4344",
        "colour_name": "Plum "
      },
      {
        "hex_value": "#854337",
        "colour_name": "Raisin "
      },
      {
        "hex_value": "#B3705A",
        "colour_name": "Toast "
      }
    ]
  },
  {
    "id": 382,
    "brand": "maybelline",
    "name": "Maybelline Dream Smooth Mousse Foundation",
    "price": "14.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/fb79e7facf701176d4113527c284613f_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-dream-smooth-mousse_28944.html",
    "website_link": "https://well.ca",
    "description": "Why You'll Love ItUnique cream-whipped foundation provides 100% baby-smooth perfection.\n\nSkin looks and feels hydrated for 14 hours - never rough or dry\nLightweight formula provides perfectly moisturizing coverage\nBlends seamlessly and feels fresh all-day\nOil-free, Fragrance-free, Dermatologist Tested, Allergy Tested, Non-comedogenic – won’t clog pores.\nSafe for sensitive skin\n\n ",
    "rating": 3.8,
    "category": "cream",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:33:13.645Z",
    "updated_at": "2017-12-23T21:08:34.195Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/382.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/382/original/open-uri20171223-4-8avct4?1514063314",
    "product_colors": [
      
    ]
  },
  {
    "id": 380,
    "brand": "maybelline",
    "name": "Maybelline Fit Me Shine-Free Foundation Stick",
    "price": "10.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/d04e7c2ed65dabe1dca4eed9aa268e95_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-fit-me-shine-free_79864.html",
    "website_link": "https://well.ca",
    "description": "Get flawless, shine-free skin instantly and on-the-go for tailor-made \nmattifying coverage.  The anti-shine core has ultra-lightweight powders \nbuilt in to the stick foundation to instantly dissolve excess oil. Features: Maybelline's first gel stick foundation with an anti-shine core\nFresh gel foundation blends to a flawless matte finish\nLightweight powders in the anti-shine core instantly dissolve excess oil",
    "rating": 4.7,
    "category": "cream",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:33:11.836Z",
    "updated_at": "2017-12-23T21:08:33.623Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/380.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/380/original/open-uri20171223-4-13lju4x?1514063313",
    "product_colors": [
      {
        "hex_value": "#FFE4C6",
        "colour_name": "Porcelain (110) "
      },
      {
        "hex_value": "#FFE5C1",
        "colour_name": "Ivory (115) "
      },
      {
        "hex_value": "#FFD9B9",
        "colour_name": "Classic Ivory (120) "
      },
      {
        "hex_value": "#FACFA8",
        "colour_name": "Natural Beige (220) "
      },
      {
        "hex_value": "#D39B70",
        "colour_name": "Toffee (330) "
      },
      {
        "hex_value": "#CA8B67",
        "colour_name": "Coconut (355) "
      }
    ]
  },
  {
    "id": 379,
    "brand": "maybelline",
    "name": "Maybelline Dream Matte Mousse Foundation",
    "price": "14.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/029889b345c76a70e8bb978b73ed1a87_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-dream-matte-mousse_3747.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Dream Matte Mouse Foundation is a revolutionary air-soft mousse that provides perfecting coverage for 100% velvet-matte complexion. It's non-comedogenic, fragrance-free, dermatologist-tested, allergy-tested and ideal for normal to oily skin.For best results: Apply smoothly and evenly to your face and blend with your fingertips.\n\n ",
    "rating": 4.4,
    "category": "cream",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:33:10.614Z",
    "updated_at": "2017-12-23T21:08:33.441Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/379.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/379/original/open-uri20171223-4-1koue12?1514063313",
    "product_colors": [
      {
        "hex_value": "#f3d7b3",
        "colour_name": "Classic Ivory "
      },
      {
        "hex_value": "#dfc5a8",
        "colour_name": "Light Beige "
      },
      {
        "hex_value": "#edd3ac",
        "colour_name": "Nude "
      },
      {
        "hex_value": "#f5dfc3",
        "colour_name": "Porcelain Ivory "
      },
      {
        "hex_value": "#d9bcaf",
        "colour_name": "Pure Beige "
      },
      {
        "hex_value": "#d8bda8",
        "colour_name": "Sandy Beige "
      }
    ]
  },
  {
    "id": 366,
    "brand": "maybelline",
    "name": "Maybelline Mineral Power Natural Perfecting Powder Foundation",
    "price": "14.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/c77ad2da76259cfd67a9a9432f635bfb_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-mineral-power-natural_5900.html?cat=582",
    "website_link": "https://well.ca",
    "description": "Why You'll Love ItMineral Power Powder Foundation with micro-minerals provides a more natural, healthier, luminous look.\nDiscover the natural power of micro-minerals:\n100% natural mica creates a more natural luminosity Complete, yet refined coverage Provides buildable, even coverage Preservative-free, talc-free, oil-free, fragrance-free Medium to Full Coverage",
    "rating": 3.9,
    "category": "mineral",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:32:42.283Z",
    "updated_at": "2017-12-23T21:08:29.561Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/366.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/366/original/open-uri20171223-4-q5cytj?1514063309",
    "product_colors": [
      {
        "hex_value": "#FFD59E",
        "colour_name": "Classic Ivory "
      }
    ]
  },
  {
    "id": 354,
    "brand": "maybelline",
    "name": "Maybelline Dream Velvet Foundation",
    "price": "18.49",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/24517c6c81c92eda31cd32b6327c1298_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-dream-velvet-foundation_112738.html?cat=581",
    "website_link": "https://well.ca",
    "description": "This Maybelline Dream Velvet Foundation is a refreshing gel-whipped foundation that leaves complexion perfected and smooth with a velvety, soft-matte finish. Skin stays hydrated for 12 hours. Features:Maybelline’s first hydrating matte foundation for 100% velvet-smooth perfectionUnique gel-whipped formulaIdeal for normal to combination skin, medium coverage For best results apply Maybelline Dream Velvet Foundation using Maybelline Dream Blender",
    "rating": 2.5,
    "category": "cream",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:32:21.385Z",
    "updated_at": "2017-12-23T21:08:36.656Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/354.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/354/original/open-uri20171223-4-ouczfl?1514063316",
    "product_colors": [
      {
        "hex_value": "#D39D7B",
        "colour_name": "Caramel "
      },
      {
        "hex_value": "#F5CAB9",
        "colour_name": "Classic Ivory "
      },
      {
        "hex_value": "#B37560",
        "colour_name": "Coconut "
      },
      {
        "hex_value": "#F3BEAC",
        "colour_name": "Creamy Natural  "
      },
      {
        "hex_value": "#E4A890",
        "colour_name": "Honey Beige  "
      },
      {
        "hex_value": "#F6D2BC",
        "colour_name": "Ivory "
      },
      {
        "hex_value": "#E2B598",
        "colour_name": "Natural Beige "
      },
      {
        "hex_value": "#F1BEAB",
        "colour_name": "Nude  "
      },
      {
        "hex_value": "#F8E0D4",
        "colour_name": "Porcelain Ivory "
      },
      {
        "hex_value": "#EEBAA4",
        "colour_name": "Pure Beige "
      },
      {
        "hex_value": "#EFC2A1",
        "colour_name": "Sandy Beige  "
      },
      {
        "hex_value": "#FAE2D6",
        "colour_name": "Warm Porcelain "
      }
    ]
  },
  {
    "id": 353,
    "brand": "maybelline",
    "name": "Maybelline Superstay Better Skin Foundation ",
    "price": "14.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/c7d967ef502ecd79ab7ab466c4952d82_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-superstay-better-skin_112548.html",
    "website_link": "https://well.ca",
    "description": "The Maybelline Superstay Better Skin Foundation reduces the appearance of spots, bumps, dullness and redness to give you brighter, smoother and more even skin. Features:Longwear that improves skin every minute you're in it: brighter, smoother and more even.With micro-flex technology and the antioxidant power of Actyl-C.Ideal for sensitive skin. Good for all skin types. Medium to full coverageHow to Apply: Apply evenly to your face and blend with your fingers. ",
    "rating": 3.0,
    "category": "liquid",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:32:19.867Z",
    "updated_at": "2017-12-23T21:08:27.318Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/353.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/353/original/open-uri20171223-4-q9ubsf?1514063307",
    "product_colors": [
      {
        "hex_value": "#9A6438",
        "colour_name": "Coconut  "
      },
      {
        "hex_value": "#DCBCA3",
        "colour_name": "Ivory "
      },
      {
        "hex_value": "#ECD3B2",
        "colour_name": "Porcelain "
      },
      {
        "hex_value": "#C99F6D",
        "colour_name": "Rich Tan  "
      },
      {
        "hex_value": "#CA9B5F",
        "colour_name": "Sun Beige  "
      }
    ]
  },
  {
    "id": 339,
    "brand": "maybelline",
    "name": "Maybelline Dream Wonder Liquid Touch Foundation",
    "price": "14.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/ccb99ad6ac7f31a2a73454bdbda01d99_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-dream-wonder-liquid-touch_96732.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Dream Wonder Liquid Touch Foundation's breakthrough texture fuses with skin. A finish so impeccable, yet undetectable.Features:Exclusive dropperMedium to full coverage, ideal for normal skinFor Best Results: Shake well. Unscrew cap. Holding dropper vertically, allow foundation to drop onto fingertip. Apply to face as usual.",
    "rating": null,
    "category": "liquid",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:31:57.182Z",
    "updated_at": "2017-12-23T21:08:22.715Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/339.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/339/original/data?1514063302",
    "product_colors": [
      {
        "hex_value": "#DDA17B",
        "colour_name": "Sun Beige (85) "
      }
    ]
  },
  {
    "id": 321,
    "brand": "maybelline",
    "name": "Maybelline Dream Liquid Mousse",
    "price": "14.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/1ca6a4a442b9aa6b5f3d94da77d8846c_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-dream-liquid-mousse_12303.html",
    "website_link": "https://well.ca",
    "description": "Airbrushed perfection made possible:Air-whipped liquid makeup for 100% poreless skin\n\nBreakthrough finish cushions and smooths for the most flawless, luminous coverage\nLightweight air-whipped formula blends to virtually eliminate pores and imperfections\nInnovative shade-match pump makes finding your perfect shade a dream \n",
    "rating": 4.4,
    "category": "liquid",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:31:31.590Z",
    "updated_at": "2017-12-23T21:08:12.680Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/321.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/321/original/open-uri20171223-4-4z6wpb?1514063292",
    "product_colors": [
      {
        "hex_value": "#FFD59E",
        "colour_name": "Classic Ivory (Light 2) "
      },
      {
        "hex_value": "#CB9E6C",
        "colour_name": "Natural Beige (Medium 2.5) "
      },
      {
        "hex_value": "#FFD9A6",
        "colour_name": "Natural Ivory (Light 3) "
      },
      {
        "hex_value": "#FBD8AA",
        "colour_name": "Porcelain Ivory (Light 1) "
      },
      {
        "hex_value": "#CE9E88",
        "colour_name": "Pure Beige (Medium 2) "
      }
    ]
  },
  {
    "id": 320,
    "brand": "maybelline",
    "name": "Maybelline FIT ME! Matte + Poreless Foundation",
    "price": "10.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/257993e12625cc45a72ec03636ffa5c5_ra,w158,h184_pa,w158,h184.jpg",
    "product_link": "https://well.ca/products/maybelline-fit-me-matte-poreless_100974.html",
    "website_link": "https://well.ca",
    "description": "Maybelline FIT ME! Matte + Poreless Foundation goes beyond  skin tone\n matching to fit the unique texture issues of normal to oily skin for \nthe ultimate natural skin fit.\n\nWhile some foundations can exaggerate pores and oily skin, only Maybelline's \npore-minimizing foundation contains their genius blurring micro-powders \nthat erase pores and absorb oil for a naturally matte and \nporeless-looking finish.Dermatologist and allergy tested.  Does not clog pores. Oil-free.\n\n  \n",
    "rating": 4.4,
    "category": "liquid",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:31:30.291Z",
    "updated_at": "2017-12-23T21:08:12.553Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/320.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/320/original/data?1514063292",
    "product_colors": [
      {
        "hex_value": "#fadbc7",
        "colour_name": "Porcelain "
      },
      {
        "hex_value": "#f1c7b1",
        "colour_name": "Natural Ivory "
      },
      {
        "hex_value": "#e8b89b",
        "colour_name": "Ivory "
      },
      {
        "hex_value": "#e6ba9f",
        "colour_name": "Classic Ivory "
      },
      {
        "hex_value": "#e5b495",
        "colour_name": "Nude Beige "
      },
      {
        "hex_value": "#e2ae8e",
        "colour_name": "Buff Beige "
      },
      {
        "hex_value": "#dead87",
        "colour_name": "Natural Beige "
      },
      {
        "hex_value": "#dfa585",
        "colour_name": "Pure Beige "
      },
      {
        "hex_value": "#d9a37f",
        "colour_name": "Sun Beige "
      },
      {
        "hex_value": "#bc855f",
        "colour_name": "Toffee "
      },
      {
        "hex_value": "#b37750",
        "colour_name": "Coconut "
      }
    ]
  },
  {
    "id": 317,
    "brand": "maybelline",
    "name": "Maybelline Fit Me Foundation with SPF",
    "price": "10.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/eccb88d484b8c929fd349b0995a5dba2_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-fit-me-foundation-with_31187.html",
    "website_link": "https://well.ca",
    "description": "It’s face makeup that fits you!Features: No oils, no waxes, no nonsenseNatural, Light to medium coverage that leaves skin the way it was meant to be. Fresh, breathing, flawless.Exclusive transluscent base and lightweight pigments allow skin’s natural highs and lows to show through.New shades formulated specifically for women of color contain \nrevolutionary 5-D pigment technology to balance your skin’s authentic \ntones and highlights.SPF 18",
    "rating": 3.8,
    "category": "liquid",
    "product_type": "foundation",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:31:25.764Z",
    "updated_at": "2017-12-23T21:08:20.342Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/317.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/317/original/open-uri20171223-4-13jpajg?1514063300",
    "product_colors": [
      {
        "hex_value": "#F7C2A5",
        "colour_name": "Ivory (115) "
      },
      {
        "hex_value": "#EFC1A0",
        "colour_name": "Classic Ivory (120) "
      },
      {
        "hex_value": "#E6B18F",
        "colour_name": "Nude Beige (125) "
      },
      {
        "hex_value": "#CE996F",
        "colour_name": "Natural Beige (220) "
      }
    ]
  },
  {
    "id": 309,
    "brand": "maybelline",
    "name": "Maybelline Expert Wear Eye Shadow Quad ",
    "price": "8.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/c924006882e8e313d445a3a5394e4729_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-expert-wear-eye-shadow_79611.html",
    "website_link": "https://well.ca",
    "description": "Easy to use, lots to choose!Maybelline Expert Wear Eye Shadow \nQuads have 4 coordinating shades with step by step application guide \nmakes shadow easier than ever. The eyeshadows glide on effortlessly with\n superior smoothness and the velvet-tip applicator blends without \ntugging or pulling. Safe for sensitive eyes and contact lens wearers, \nophthalmologist-tested.For best results sweep the brush 4 times:Apply base color. Sweep shade on lid. Contour crease and blend. Line around eye. ",
    "rating": 4.0,
    "category": null,
    "product_type": "eyeshadow",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:31:00.847Z",
    "updated_at": "2017-12-23T21:08:19.919Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/309.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/309/original/open-uri20171223-4-1mmpy02?1514063299",
    "product_colors": [
      
    ]
  },
  {
    "id": 307,
    "brand": "maybelline",
    "name": "Maybelline Eyestudio Color Tattoo Concentrated Crayon",
    "price": "10.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/3f9f894b56e0616e44c5ee01dea45217_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-eyestudio-color-tattoo_114535.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Eyestudio Color Tattoo Concentrated Crayons give you high-intensity color that looks vibrant all-day long.Features:Smooth, soft creamy finishPlayful intense colorsAll day tattoo tenacity. Playful color intensity. In an easy glide on crayon.",
    "rating": 3.0,
    "category": null,
    "product_type": "eyeshadow",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:30:58.610Z",
    "updated_at": "2017-12-23T21:08:18.441Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/307.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/307/original/open-uri20171223-4-5xfc8v?1514063298",
    "product_colors": [
      {
        "hex_value": "#515552",
        "colour_name": "Audacious Asphalt "
      },
      {
        "hex_value": "#D8BFAC",
        "colour_name": "Barely Beige "
      },
      {
        "hex_value": "#B89A89",
        "colour_name": "Bronze Truffle "
      },
      {
        "hex_value": "#706A70",
        "colour_name": "Charcoal Chrome "
      },
      {
        "hex_value": "#5C3B27",
        "colour_name": "Creamy Chocolate "
      },
      {
        "hex_value": "#DDBA89",
        "colour_name": "Gold Rush "
      },
      {
        "hex_value": "#8E8C86",
        "colour_name": "Grey Crystal "
      },
      {
        "hex_value": "#7D6F7D",
        "colour_name": "Lavish Lavender "
      },
      {
        "hex_value": "#957B83",
        "colour_name": "Lilac Lust "
      },
      {
        "hex_value": "#E5AEB9",
        "colour_name": "Pink Parfait "
      }
    ]
  },
  {
    "id": 295,
    "brand": "maybelline",
    "name": "Maybelline The Nudes Eye Shadow Palette",
    "price": "17.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/201350fd3e173307ade44520dc87d8fb_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-the-nudes-eye-shadow_95144.html",
    "website_link": "https://well.ca",
    "description": "Maybelline The Nudes Eye Shadow Palette let's you create looks from day to night. Deep to light. So try it out and create your ideal eye look today!Features: \n\t\t\n\t\t\t\n\t\t\t\t13 looks in one Expert Wear eyeshadow palette\nExtraordinary Colour, from soft highlights, to medium bronze, to rich black\nFrom Maybelline's ultra-blendable pigments\nLong Wear\n\t\t\n\t\t\t\n\t\t\t\t",
    "rating": 2.0,
    "category": "palette",
    "product_type": "eyeshadow",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:30:35.715Z",
    "updated_at": "2017-12-26T00:33:00.316Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/295.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/295/original/open-uri20171223-4-5nv3ff?1514063296",
    "product_colors": [
      
    ]
  },
  {
    "id": 291,
    "brand": "maybelline",
    "name": "Maybelline Eye Studio Color Tattoo 24HR Cream Gel Shadow Leather",
    "price": "8.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/cf21d194ab14ee3c527d02682c358a7a_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-eye-studio-color-tattoo_95143.html",
    "website_link": "https://well.ca",
    "description": "\n                       \n\tSo rich. So creamy. Only Maybelline's cream gel eye shadow formula gets the look of couture leather so right!\n\t\t\n\t\t\t\n\t\t\t\tDare to wear Maybelline Color Tattoo leather 24HR long wear eye shadow.Features: Ink technology creates 24HR wear shadow for our most intense, long-lasting color saturationCream eye shadow formula glides on without creasing and keeps color vibrantOphthalmologist-tested.  Safe for sensitive eyes and contact lens wearers\n\t\tShade Range: \n\t\n\n                    \n                ",
    "rating": 4.3,
    "category": null,
    "product_type": "eyeshadow",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:30:28.176Z",
    "updated_at": "2017-12-23T21:08:16.007Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/291.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/291/original/open-uri20171223-4-1693fvq?1514063295",
    "product_colors": [
      {
        "hex_value": "#8A665B",
        "colour_name": "Chocolate Suede (95) "
      },
      {
        "hex_value": "#BD9786",
        "colour_name": "Creamy Beige (80) "
      },
      {
        "hex_value": "#98907A",
        "colour_name": "Deep Forest (85) "
      },
      {
        "hex_value": "#484A4E",
        "colour_name": "Dramatic Black (100) "
      },
      {
        "hex_value": "#B196A6",
        "colour_name": "Vintage Plum (90) "
      }
    ]
  },
  {
    "id": 286,
    "brand": "maybelline",
    "name": "Maybelline The Nudes Eyeshadow Palette in The Blushed Nudes",
    "price": "17.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/49d98e112e77d2a9a0c8fad28df89a1e_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-the-nudes-eyeshadow_107498.html",
    "website_link": "https://well.ca",
    "description": "Create looks from day to night and deep to light with Maybelline's The Blushed Nudes Eyeshadow Palette.Features:13 looks in one eyeshadow paletteExtraordinary colour from ultra-blendable pigmentsLong wear with sensual finish that lasts up to 12 hours",
    "rating": 4.5,
    "category": "palette",
    "product_type": "eyeshadow",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:30:20.193Z",
    "updated_at": "2017-12-26T00:33:00.206Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/286.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/286/original/open-uri20171223-4-1pj74fn?1514063294",
    "product_colors": [
      
    ]
  },
  {
    "id": 279,
    "brand": "maybelline",
    "name": "Maybelline Eye Studio Color Tattoo 24HR Cream Gel Shadow",
    "price": "8.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/c2ddacc79f4fdd3d23664581c76546bc_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-eye-studio-color-tattoo_50692.html",
    "website_link": "https://well.ca",
    "description": "Dare to wear 24HR shadow!Maybelline's Color Tattoo Cream Gel Shadow uses ink technology for their most intense, long-lasting colour saturation. The cream formula glides on without creasing and keeps colour vibrant.Ophthalmologist-tested. Safe for sensitive eyes and contact lens wearers.\n                    \n                    \n                    \n                        \n                        For best results: With \nfingertips, sweep all over eye from inner corner and work outwards. For\n added drama, darken as desired.               ",
    "rating": 4.5,
    "category": null,
    "product_type": "eyeshadow",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:30:10.665Z",
    "updated_at": "2017-12-23T21:08:13.016Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/279.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/279/original/open-uri20171223-4-h37y2c?1514063292",
    "product_colors": [
      {
        "hex_value": "#ab897d",
        "colour_name": "Bad to the Bronze "
      },
      {
        "hex_value": "#1d8493",
        "colour_name": "Tenacious Teal "
      },
      {
        "hex_value": "#d3cfcc",
        "colour_name": "Too Cool "
      },
      {
        "hex_value": "#81726d",
        "colour_name": "Tough as Taupe "
      }
    ]
  },
  {
    "id": 273,
    "brand": "maybelline",
    "name": "Maybelline Eye Studio Color Tattoo 24HR Cream Gel Shadow ",
    "price": "8.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/58d07d24e39142e0c5a178b00b6b31f1_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-eye-studio-color-tattoo_67270.html",
    "website_link": "https://well.ca",
    "description": "Dare to wear 24HR shadow!Maybelline's Color Tattoo Cream Gel \nShadow uses ink technology for their most intense, long-lasting shimmery metallic shades. The cream formula glides on without creasing and keeps \ncolour vibrant.Ophthalmologist-tested. Safe for sensitive eyes and contact lens wearers.\n                    \n                    \n                    \n                        \n                        Shade Range: For best results: With \nfingertips, sweep all over eye from inner corner and work outwards. For\n added drama, darken as desired.      ",
    "rating": 4.0,
    "category": null,
    "product_type": "eyeshadow",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:30:01.223Z",
    "updated_at": "2017-12-23T20:51:33.487Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/273.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/273/original/open-uri20171223-4-ql025m?1514062293",
    "product_colors": [
      {
        "hex_value": "#fdd3d2",
        "colour_name": "Inked in Pink (55) "
      },
      {
        "hex_value": "#c5c7c8",
        "colour_name": "Silver Strike (60) "
      },
      {
        "hex_value": "#f2caad",
        "colour_name": "Barely Branded (70) "
      }
    ]
  },
  {
    "id": 232,
    "brand": "maybelline",
    "name": "Maybelline Line Express Eyeliner",
    "price": "7.29",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/4e88f928ad91c88e2ecb8596431ce799_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-line-express-eyeliner_9738.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Line Express Eyeliner's intense color formula + smart tip smudger makes this liner glide on smoothly and is easy to apply with just one stroke.Features: Creamy formula delivers intense colorContour smudger makes blending easyAll-day wearSafe for sensitive eyes and ophthalmologist-testedContact lens safe",
    "rating": 4.5,
    "category": "pencil",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:28:59.422Z",
    "updated_at": "2017-12-23T20:51:31.255Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/232.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/232/original/open-uri20171223-4-1gco531?1514062291",
    "product_colors": [
      
    ]
  },
  {
    "id": 230,
    "brand": "maybelline",
    "name": "Maybelline Unstoppable Eyeliner",
    "price": "8.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/bab89a9fe13b34235e0dd1f4f44c05cf_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-unstoppable-eyeliner_3737.html",
    "website_link": "https://well.ca",
    "description": "Unstoppable Eyeliner allows ultra-smooth application for defined lines and eyes.\nIt is a self-sharpening mechanical pencil, and will hold your look in place all day long.\nWaterproof.\nOphthalmologist tested, contact lens safe for sensitive eyes.\n",
    "rating": 4.3,
    "category": "pencil",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:28:57.194Z",
    "updated_at": "2017-12-23T20:51:30.858Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/230.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/230/original/open-uri20171223-4-1noqhmg?1514062290",
    "product_colors": [
      {
        "hex_value": "#736364",
        "colour_name": "Onyx "
      },
      {
        "hex_value": "#797B7D",
        "colour_name": "Pewter "
      }
    ]
  },
  {
    "id": 225,
    "brand": "maybelline",
    "name": "Maybelline Color Show Kohl Liner",
    "price": "5.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/c2fcd605bbf3941b521fb74bfa942ac6_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-show-kohl-liner_101020.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Color Show Kohl Liner is the hottest new way to create statement eyes!The brightest colors. The easiest glide. Creamy, rich color has never \nbeen this precise!",
    "rating": null,
    "category": "pencil",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:28:51.002Z",
    "updated_at": "2017-12-23T20:51:29.742Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/225.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/225/original/open-uri20171223-4-77bvjo?1514062289",
    "product_colors": [
      {
        "hex_value": "#2e4064",
        "colour_name": "Beauty Blue "
      },
      {
        "hex_value": "#56403a",
        "colour_name": "Chocolate Chip "
      },
      {
        "hex_value": "#008687",
        "colour_name": "Edgy Emerald "
      },
      {
        "hex_value": "#854f58",
        "colour_name": "Marvelous Maroon "
      },
      {
        "hex_value": "#837163",
        "colour_name": "Sparkle Grey "
      },
      {
        "hex_value": "#00849d",
        "colour_name": "Turquoise Flash "
      },
      {
        "hex_value": "#000000",
        "colour_name": "Ultra Black "
      },
      {
        "hex_value": "#574c7c",
        "colour_name": "Vibrant Violet "
      }
    ]
  },
  {
    "id": 221,
    "brand": "maybelline",
    "name": "Maybelline Eye Studio Master Graphic in Striking Black",
    "price": "11.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/9c98f99f2033bb942286fa1bb32b4c51_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-eye-studio-master-graphic_112723.html",
    "website_link": "https://well.ca",
    "description": "Eye Studio Master Graphic Liquid Liner from Maybelline New York. Love the graphic look? This genius eyeliner automatically draws the boldest line with the sharpest edge! Features:Automatically draw the boldest line with the sharpest edgePitch black finishUse the flat side for bold line. Use the sharp tip for the edges",
    "rating": null,
    "category": "liquid",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:28:44.845Z",
    "updated_at": "2017-12-23T20:51:28.186Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/221.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/221/original/open-uri20171223-4-1v1tlhi?1514062288",
    "product_colors": [
      
    ]
  },
  {
    "id": 179,
    "brand": "maybelline",
    "name": "Maybelline EyeStudio Master Precise Ink Pen Eyeliner",
    "price": "11.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/6edd2cadd1894a94f264ceb19f3d344b_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-eyestudio-master-precise_40535.html",
    "website_link": "https://well.ca",
    "description": "Experience the new generation of liquid liner from Maybelline!              Ink technology keeps pigments super-saturatedSpring cap keeps the formula freshMost precise line for lasting intensity                                                    Safe for sensitive eyes and ophthalmologist-testedContact lens safeFor Best Results: 1. Start at inner corner of upper eye. Flare outward. 2. Create the sharpest design, uniquely your own.",
    "rating": 4.0,
    "category": "liquid",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:27:51.862Z",
    "updated_at": "2017-12-23T20:51:16.524Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/179.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/179/original/open-uri20171223-4-1vi901o?1514062276",
    "product_colors": [
      
    ]
  },
  {
    "id": 177,
    "brand": "maybelline",
    "name": "Maybelline Line Stiletto Ultimate Precision Liquid Eyeliner",
    "price": "10.29",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/350d6c6c2fa3add8ee40189cd19bfe0a_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-line-stiletto-ultimate_17295.html",
    "website_link": "https://well.ca",
    "description": "Easily Creates Slender Lines\n\n    Rich, Even Color\n    All-Day Wear\n    Smooth Glide Felt Tip\n    Flexible tip guides on smoothly for the most precise control.\n    All-day wear up to 8 hours\n",
    "rating": 4.0,
    "category": "liquid",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:27:50.155Z",
    "updated_at": "2017-12-23T20:51:16.164Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/177.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/177/original/open-uri20171223-4-p0eowt?1514062276",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Blackest Black "
      },
      {
        "hex_value": "#4E2F2F",
        "colour_name": "Brown Black "
      }
    ]
  },
  {
    "id": 172,
    "brand": "maybelline",
    "name": "Maybelline Liquid Eyeliner",
    "price": "10.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/316d25ac5676470d83612b9391678b0d_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-liquid-eyeliner_3739.html",
    "website_link": "https://well.ca",
    "description": "\nWaterproof Liquid Eyeliner draws intense lining in an instant.\nIt glides on smoothly for even coverage.\nThe firm felt tip applicator allows easy control.\nWaterproof, all-day wear.\n",
    "rating": 4.2,
    "category": "liquid",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:27:44.166Z",
    "updated_at": "2017-12-23T20:51:13.942Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/172.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/172/original/data?1514062273",
    "product_colors": [
      {
        "hex_value": "#06090A",
        "colour_name": "Black "
      }
    ]
  },
  {
    "id": 170,
    "brand": "maybelline",
    "name": "Maybelline Eye Studio Lasting Drama Gel Eyeliner",
    "price": "11.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/2054f702d243c286219e0330af836bf5_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-eye-studio-lasting-drama_23247.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Eye Studio Lasting Drama Gel Eyeliner gives you smudge-proof lines that are waterproof for 24 hours. Features:            Oil-free formula holds highly concentrated pigments in a clear gel baseSmudge-proof and waterproof for 24 hoursMost intense line for lasting drama                                                    Safe for sensitive eyes and ophthalmologist-testedContact lens safe\n\t\tRemoves easily with Expert Eyes® Moisturizing Eye Makeup Remover.Maybelline Eye Studio Lasting Drama Gel Eyeliner is one of our 10 Makeup Must Haves.  See the full list on The Well.  ",
    "rating": 4.4,
    "category": "liquid",
    "product_type": "eyeliner",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:27:42.507Z",
    "updated_at": "2017-12-23T20:51:13.684Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/170.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/170/original/open-uri20171223-4-1hy3kmf?1514062273",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Blackest Black 950 "
      },
      {
        "hex_value": "#60423B",
        "colour_name": "Brown 952 "
      },
      {
        "hex_value": "#4A484B",
        "colour_name": "Charcoal 954 "
      }
    ]
  },
  {
    "id": 146,
    "brand": "maybelline",
    "name": "Maybelline Color Show Nail Lacquer Jewels ",
    "price": "4.49",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/f6239cbcd84fa838c461f020b86924aa_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-show-nail-lacquer_96730.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Color Show Nail Lacquer Jewels collection features jeweled nail lacquer top coats straight from the shows!Features:Adorns your nails with textured gem effectsTrendy top coat nail art designsEasy-flow brushFormaldehyde, DBP and Toluene freeShade Range: (left to right: Mosaic Prism, Platinum Adorn)For Best Results:First apply a clear base coat to prevent your nails from yellowing and to help your nail color last longer. Choose a base shade and with one sweep, paint the first line of nail polish up the center of your nail starting from the base to the tip.For the cleanest look, be sure to leave a small space at the base of the nail. Then apply nail color to the rest of the nail. Pick your textured top coat and paint over your base shade for a street styled nail art look.",
    "rating": 3.0,
    "category": null,
    "product_type": "nail_polish",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:26:51.778Z",
    "updated_at": "2017-12-23T20:51:08.631Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/146.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/146/original/open-uri20171223-4-fnr4hp?1514062268",
    "product_colors": [
      
    ]
  },
  {
    "id": 145,
    "brand": "maybelline",
    "name": "Maybelline Color Show Nail Lacquer Veils ",
    "price": "4.49",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/64cbcfbd001435c3abc3d8f77c16a0bf_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-show-nail-lacquer_96731.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Color Show Nail Lacquer Veils collection gives you subtle shimmers to refined glitters in colours straight from the shows!Features:Trendy top coat nail art designsEasy-flow brushFormaldehyde, DBP and Toluene freeShade Range: (left to right: Amethyst Aura, Rose Mirage, Crystal Disguise)For Best Results:First\n apply a clear base coat to prevent your nails from yellowing and to \nhelp your nail color last longer. Choose a base shade and with one \nsweep, paint the first line of nail polish up the center of your nail \nstarting from the base to the tip.For the cleanest look, be sure\n to leave a small space at the base of the nail. Then apply nail color \nto the rest of the nail. Pick your textured top coat and paint over your\n base shade for a street styled nail art look.",
    "rating": 4.0,
    "category": null,
    "product_type": "nail_polish",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:26:50.448Z",
    "updated_at": "2017-12-23T20:51:08.413Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/145.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/145/original/open-uri20171223-4-1a63bxt?1514062268",
    "product_colors": [
      {
        "hex_value": "#394674",
        "colour_name": "Amethyst Aura "
      }
    ]
  },
  {
    "id": 133,
    "brand": "maybelline",
    "name": "Maybelline Color Show Nail Lacquer ",
    "price": "4.49",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/a05aa31a7e30d9d262ae36d0be2c4f87_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-show-nail-lacquer_78068.html",
    "website_link": "https://well.ca",
    "description": "High fashion meets high-art. With Maybelline Color Show Nail Lacquer PolkaDots Collection you get 3D nail design for your fingertips!Features: \nCreates Hollywood-worthy special effectsChip-resistant formula Easy-flow brushFormaldehyde, DBP and Toluene freeShade Range: \n",
    "rating": 3.3,
    "category": null,
    "product_type": "nail_polish",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:26:31.673Z",
    "updated_at": "2017-12-23T20:51:05.961Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/133.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/133/original/open-uri20171223-4-zz1pau?1514062265",
    "product_colors": [
      {
        "hex_value": "#037679",
        "colour_name": "Drops of Jade  (55) "
      }
    ]
  },
  {
    "id": 97,
    "brand": "maybelline",
    "name": "Maybelline Color Sensational Vivid Matte Liquid Lip Colour",
    "price": "12.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/d0b6855d9b603a00f776de498c971b88_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-sensational-vivid_114538.html",
    "website_link": "https://well.ca",
    "description": "Bold, vivid color glides easily onto lips for a velvety matte finish with Maybelline Color Sensational Vivid Matte Liquid Lip Colour. \nFormula is comfortable and creamy with a smooth feel upon application. \nWith full color coverage, the result is a rich, intense lip look in a \nrange of colors from Nude Flush to Electric Pink to Vivid Violet.Features: Lip color glides on smooth to a matte finishInfused with pure pigments for high-impact colorCreamy liquid base for a soft, cushiony feel",
    "rating": null,
    "category": "lipstick",
    "product_type": "lipstick",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:25:33.281Z",
    "updated_at": "2017-12-23T20:50:59.331Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/97.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/097/original/open-uri20171223-4-128aihq?1514062259",
    "product_colors": [
      {
        "hex_value": "#AC7773",
        "colour_name": "Nude Thrill "
      },
      {
        "hex_value": "#BD7A80",
        "colour_name": "Nude Flush "
      },
      {
        "hex_value": "#D65F84",
        "colour_name": "Pink Charge "
      },
      {
        "hex_value": "#D73D8C",
        "colour_name": "Electric Pink "
      },
      {
        "hex_value": "#B12156",
        "colour_name": "Fuchsia Ecstasy "
      },
      {
        "hex_value": "#BC2830",
        "colour_name": "Orange Shot "
      },
      {
        "hex_value": "#B7233B",
        "colour_name": "Rebel Red "
      },
      {
        "hex_value": "#8C1F48",
        "colour_name": "Berry Boost "
      },
      {
        "hex_value": "#542A71",
        "colour_name": "Vivid Violet "
      },
      {
        "hex_value": "#300B28",
        "colour_name": "Possessed Plum "
      }
    ]
  },
  {
    "id": 89,
    "brand": "maybelline",
    "name": "Maybelline Color Sensational Rebel Bloom Lipcolour ",
    "price": "9.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/fb9e6485500135d94163577da4c3579b_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-sensational-rebel_101920.html",
    "website_link": "https://well.ca",
    "description": "\n                       \n\tMaybelline Color Sensational® Rebel Bloom lipstick offers vivacious pastels in a super-saturated lipcolour. Enjoy the kicky bouquet of lip colors in \npinks, reds and mauves.  Features:Super-saturated pigments take fresh picked pastels to a new bright\nNever dull, washed out or shy\nHoney nectar adds a sumptuous feel\n\n\t\tApplication: Apply lipcolor starting in the center of your upper lip. Work\n from the center to the outer edges of your lip, following the contours \nof your mouth. Then glide across the entire bottom lip.\n\n\t\t\n\t\n\n                    ",
    "rating": 3.0,
    "category": "lipstick",
    "product_type": "lipstick",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:25:20.981Z",
    "updated_at": "2017-12-23T20:50:59.663Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/89.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/089/original/open-uri20171223-4-pkrmxd?1514062259",
    "product_colors": [
      {
        "hex_value": "#db967f",
        "colour_name": "Barely Bloomed "
      },
      {
        "hex_value": "#d37d79",
        "colour_name": "Blushing Bud "
      },
      {
        "hex_value": "#f05b4a",
        "colour_name": "Coral Burst "
      },
      {
        "hex_value": "#cd86b0",
        "colour_name": "Lilac Flush "
      },
      {
        "hex_value": "#ff8f9d",
        "colour_name": "Petal Pink "
      },
      {
        "hex_value": "#bd2629",
        "colour_name": "Rose Rush "
      }
    ]
  },
  {
    "id": 85,
    "brand": "maybelline",
    "name": "Maybelline Lip Studio Color Blur ",
    "price": "11.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/a1151b59f69491a75d9f8d80827bc1ee_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-lip-studio-color-blur_106565.html",
    "website_link": "https://well.ca",
    "description": "Maybelline's Lip Studio Color Blur is a unique cream matte pencil with vivid colour.  The blurring smudger allows you to create your look from full on bold to softly blurred.Features:The cream matte pencil feels extremely smooth and comfortable on lips The blurring smudger means you can create your own looks from full-on bold to softly blurredColor Blur comes in many shades ranging from vivids to neutralsHow to Use: To achieve the softly blurred look, apply colour in the center of your top and bottom lips. Using the smudger, gently blur the colour out towards the edges of your top lip and then bottom lip.",
    "rating": null,
    "category": "lipstick",
    "product_type": "lipstick",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:25:14.865Z",
    "updated_at": "2017-12-23T20:50:59.009Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/85.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/085/original/open-uri20171223-4-1cl0hgq?1514062258",
    "product_colors": [
      {
        "hex_value": "#EF6E87",
        "colour_name": "Berry Misbehaved "
      },
      {
        "hex_value": "#CF444B",
        "colour_name": "Cherry Cherry Bang Bang  "
      },
      {
        "hex_value": "#FF94A7",
        "colour_name": "Fast & Fuchsia  "
      },
      {
        "hex_value": "#E18CB0",
        "colour_name": "I Like to Mauve It "
      },
      {
        "hex_value": "#F393B0",
        "colour_name": "I'm Blushing! "
      },
      {
        "hex_value": "#C06E8A",
        "colour_name": "My-My Magenta "
      },
      {
        "hex_value": "#B42F3F",
        "colour_name": "Partner in Crimson  "
      },
      {
        "hex_value": "#FF99DC",
        "colour_name": "Pink Insanity  "
      },
      {
        "hex_value": "#955C69",
        "colour_name": "Plum, Please "
      }
    ]
  },
  {
    "id": 73,
    "brand": "maybelline",
    "name": "Maybelline Color Sensational The Buffs Lipcolour",
    "price": "9.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/27afa69db661563a1d6135bb5f6079dd_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-sensational-the_88857.html",
    "website_link": "https://well.ca",
    "description": "Raw. Real. Pigments explode with sensuous impact…sensational! Maybelline Color Sensational The Buffs Lipcolour have true nude lip color pigments for honest flesh tone color. This range has it all, from blushing beige, to bronze, to espresso.\n\t\tFor Best Results: Apply your nude lip color lipstick by starting in the center \nof your upper lip. Work from the center to the outer edges of your lip, \nfollowing the contours of your mouth. Then glide across the entire \nbottom lipShade Range: \n\t\n\n                    ",
    "rating": 4.8,
    "category": "lipstick",
    "product_type": "lipstick",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:24:56.389Z",
    "updated_at": "2017-12-23T20:51:18.174Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/73.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/073/original/open-uri20171223-4-92movw?1514062278",
    "product_colors": [
      {
        "hex_value": "#E3A28C",
        "colour_name": "Bare All "
      },
      {
        "hex_value": "#EB907D",
        "colour_name": "Blushing Beige "
      },
      {
        "hex_value": "#DD8A78",
        "colour_name": "Nude Lust "
      },
      {
        "hex_value": "#A95D50",
        "colour_name": "Maple Kiss "
      },
      {
        "hex_value": "#E2937F",
        "colour_name": "Truffle Tease  "
      },
      {
        "hex_value": "#D47661",
        "colour_name": "Stormy Sahara "
      },
      {
        "hex_value": "#8A3938",
        "colour_name": "Untainted Spice "
      },
      {
        "hex_value": "#590004",
        "colour_name": "Expresso Exposed  "
      }
    ]
  },
  {
    "id": 72,
    "brand": "maybelline",
    "name": "Maybelline Color Sensational Vivids Lipcolour",
    "price": "9.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/0d31f41c37fd18dfc02daa1671719378_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-sensational-vivids_66103.html",
    "website_link": "https://well.ca",
    "description": "With Maybelline Colour Sensational Vivids Lipcolour bright goes gorgeous, never garish!Get brighter color from Maybelline's exclusive vivid pigments. Plus get creamier feel from nourishing honey nectar. Features: Be bright and gorgeousExclusive Vivid colors are brighterHoney nectar formula nourishes lipsFor Best Results: Apply lipcolor starting in the center of your upper lip. Work from the center to the outer edges of your lip, following the contours of your mouth. Then glide across the entire bottom lip.Shade Range: ",
    "rating": 5.0,
    "category": "lipstick",
    "product_type": "lipstick",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:24:55.093Z",
    "updated_at": "2017-12-23T20:50:55.568Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/72.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/072/original/open-uri20171223-4-jaz2h8?1514062255",
    "product_colors": [
      {
        "hex_value": "#f9005b",
        "colour_name": "Vivid Rose (825) "
      },
      {
        "hex_value": "#ff2e8c",
        "colour_name": "Fuchsia Flash (865) "
      },
      {
        "hex_value": "#ff4a62",
        "colour_name": "Shocking Coral (870) "
      },
      {
        "hex_value": "#ff3b00",
        "colour_name": "Electric Orange (880) "
      },
      {
        "hex_value": "#ff6ab6",
        "colour_name": "Pink Pop (880) "
      },
      {
        "hex_value": "#ba0000",
        "colour_name": "On Fire Red (895) "
      }
    ]
  },
  {
    "id": 69,
    "brand": "maybelline",
    "name": "Maybelline Color Sensational Creamy Mattes Lipcolour ",
    "price": "9.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/81fd80f898674d00f1860cd0724460f4_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-sensational-creamy_100322.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Creamy Mattes by Color Sensational deliver a burst of bold lip color and a surge of creamy texture in great make-a-statement shades, for mattes your lips will love to wear!Features: Lips slip into this creamy matteMattifying cream pure pigments and three precious oilsMake-a-statement shades",
    "rating": 5.0,
    "category": "lipstick",
    "product_type": "lipstick",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:24:51.748Z",
    "updated_at": "2017-12-23T20:50:56.946Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/69.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/069/original/open-uri20171223-4-uyvfh1?1514062256",
    "product_colors": [
      {
        "hex_value": "#ff1303",
        "colour_name": "Craving Coral "
      },
      {
        "hex_value": "#e87e74",
        "colour_name": "Daringly Nude "
      },
      {
        "hex_value": "#ff2f99",
        "colour_name": "Faint For Fuchsia "
      },
      {
        "hex_value": "#db5c83",
        "colour_name": "Lust for Blush "
      },
      {
        "hex_value": "#ec0064",
        "colour_name": "Mesmerizing Magenta "
      },
      {
        "hex_value": "#f5367d",
        "colour_name": "Ravishing Rose (Bright Rose Pink) "
      },
      {
        "hex_value": "#b63849",
        "colour_name": "Touch of Spice "
      }
    ]
  },
  {
    "id": 65,
    "brand": "maybelline",
    "name": "Maybelline Color Sensational Lipcolour",
    "price": "9.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/b1c627d5a7e341e53754c8dee92d2878_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-color-sensational_14537.html",
    "website_link": "https://well.ca",
    "description": "Maybelline Colour Sensational Lipcolour will make you fall in love with color, all over again! Features: \n\nCrisper color from pure pigments \nCreamier feel from nourishing honey nectar \nLipcolor so rich, so stunning… it’s sensational Incredible colour range, from pinks, plums, reds and bronze\n\n ",
    "rating": 4.2,
    "category": "lipstick",
    "product_type": "lipstick",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:24:44.446Z",
    "updated_at": "2017-12-23T20:50:57.314Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/65.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/065/original/open-uri20171223-4-f2n6t8?1514062257",
    "product_colors": [
      {
        "hex_value": "#E70C2F",
        "colour_name": "Are you Red-dy "
      },
      {
        "hex_value": "#DF8A82",
        "colour_name": "Born With It "
      },
      {
        "hex_value": "#F15B50",
        "colour_name": "Coral Crush "
      },
      {
        "hex_value": "#8F332C",
        "colour_name": "Crazy for Coffee "
      },
      {
        "hex_value": "#CA6E6B",
        "colour_name": "Warm Me Up "
      }
    ]
  },
  {
    "id": 42,
    "brand": "maybelline",
    "name": "Maybelline Volum'Express Falsies Big Eyes Mascara",
    "price": "12.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/a28e1387642c86f2d2e0cf446b2137aa_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-volumexpress-falsies-big_78175.html",
    "website_link": "https://well.ca",
    "description": "2 brushes. 2x more impact!Now get bigger eyes with 360 degrees of false \nlash glam volume! Upper lashes get over-the-top glam with the upper \nbrush, while the lower brush grabs every tiny lower lash for a full \ncircle effect.For best results: Apply the Upper Brush against the top lid lashes and sweep from\n root to tip until a clean, voluminous look is achieved, followed by the\n lower lash line using the lower Micro Brush. Do not let dry between \ncoats. Removes easily with soap and water or with Maybelline® Clean \nExpress!™ Classic Eye Makeup Remover.\n",
    "rating": 4.5,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:11:34.910Z",
    "updated_at": "2017-12-23T20:50:53.492Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/42.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/042/original/open-uri20171223-4-b55ku9?1514062253",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Blackest Black "
      }
    ]
  },
  {
    "id": 32,
    "brand": "maybelline",
    "name": "Maybelline Define-A-Lash Lengthening & Defining Mascara",
    "price": "10.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/cf9136ade1dd304b8cb81deb4b87e333_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-define-a-lash-lengthening_3744.html",
    "website_link": "https://well.ca",
    "description": "Define-A-Lash Lengthening & Defining Mascara is a zero-clump mascara that creates stunning length and clean definition. The flexible brush is shaped to the lash to elongate and define lashes, one by one. The built-in wiper contours brush to remove excess formula, ensuring clean deposit on lashes. There is no smudging, smearing or flaking, and the smooth, lightweight formula feels comfortable on lashes.Allergy tested, ophthalmologist tested and contact lens safe.\n\n",
    "rating": 4.4,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:11:22.926Z",
    "updated_at": "2017-12-23T20:31:52.284Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/32.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/032/original/data?1514061112",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Very Black "
      }
    ]
  },
  {
    "id": 29,
    "brand": "maybelline",
    "name": "Maybelline Great Lash - Clear",
    "price": "7.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/6cce75ce02a6694e1c89f7d5a68c8174_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-great-lash-clear_3752.html",
    "website_link": "https://well.ca",
    "description": "Great Lash Clear Washable Mascara is a crystal clear formula that gives a softer, fuller look.The gentle brush separates lashes into a perfect fan. It contains panthenol to condition lashes, glycerin for a soft feel. This is great for shaping and setting brows. Contact lens safe, opthalmologist tested.\n ",
    "rating": 3.8,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:11:20.042Z",
    "updated_at": "2017-12-23T20:31:51.787Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/29.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/029/original/open-uri20171223-4-14f14ix?1514061111",
    "product_colors": [
      
    ]
  },
  {
    "id": 23,
    "brand": "maybelline",
    "name": "Maybelline Great Lash Big Mascara",
    "price": "7.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/0795abd7feaf855f88055e181652d65a_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-great-lash-big-mascara_15818.html",
    "website_link": "https://well.ca",
    "description": "Live Big! Great Lash Big has a Bigger Brush for Great Big Live-It-Up Lashes!\n\nThe Great Big Brush provides a bigger, bolder lash effect\nGreat buildable formula still conditions as it thickens with even greater intensity\nNo clumps or globs\n",
    "rating": 4.0,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:11:13.293Z",
    "updated_at": "2017-12-23T20:31:49.724Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/23.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/023/original/data?1514061109",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Blackest Black "
      },
      {
        "hex_value": "#120C0A",
        "colour_name": "Brownish Black "
      },
      {
        "hex_value": "#0E0F11",
        "colour_name": "Very Black "
      }
    ]
  },
  {
    "id": 20,
    "brand": "maybelline",
    "name": "Maybelline Great Lash Mascara",
    "price": "7.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/6b4d354890177a73b4d6630d723c2f21_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-great-lash-mascara_3735.html",
    "website_link": "https://well.ca",
    "description": "Great Lash Waterproof Mascara conditions as it thickens lashes. The lash-doubling formula glides on smoothly to build great-looking smudge-proof lashes. The lash-building brush makes it easy to get a full lash look without clumps. Hypoallergenic and contact lens safe.\nAllure 2008 Reader's Choice Award Winner for drugstore mascara.\n",
    "rating": 4.2,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:11:09.921Z",
    "updated_at": "2017-12-23T20:31:50.950Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/20.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/020/original/data?1514061110",
    "product_colors": [
      {
        "hex_value": "#120C0A",
        "colour_name": "Brownish Black "
      },
      {
        "hex_value": "#0E0F11",
        "colour_name": "Very Black "
      }
    ]
  },
  {
    "id": 14,
    "brand": "maybelline",
    "name": "Maybelline Volum' Express Colossal Mascara",
    "price": "9.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/5d6e0d96f6dedbc3aadd88d9403cb26e_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-volum-express-colossal_7663.html",
    "website_link": "https://well.ca",
    "description": "Why You'll Love It\n\nCreates 9X the volume, instantly.\nPatented MegaBrush + Collagen Formula plump lashes one by one \nDramatic Volume with no clumps \nWashable \n",
    "rating": 4.5,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:11:01.516Z",
    "updated_at": "2017-12-23T20:31:48.510Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/14.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/014/original/data?1514061108",
    "product_colors": [
      {
        "hex_value": "#0D090A",
        "colour_name": "Classic Black "
      },
      {
        "hex_value": "#000000",
        "colour_name": "Glam Black "
      }
    ]
  },
  {
    "id": 12,
    "brand": "maybelline",
    "name": "Maybelline Illegal Length Fiber Extensions Mascara",
    "price": "11.49",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/086bd6bba51f630f60511cdc24c68096_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-illegal-length-fiber_84357.html",
    "website_link": "https://well.ca",
    "description": "Build 4mm of measurable extensions! Features: Fiber-fix brush has 6 different contact points with each lash for optimal fiber placementBreakthrough formula contains fibers up to 4mm in lengthSealing formula stretches lashes and seals fibers to lashesWashable, also available in waterproof formula \nFor Best Results: Extend lashes upward with Fiber-Fix brush, from root to tip. \nOnly a few strokes necessary. For best results, do not let dry between \ncoats.  Removes easily with soap and water or Maybelline® Expert Eyes® \n100% Oil-Free Eye Makeup Remover.\n",
    "rating": 4.0,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:10:59.587Z",
    "updated_at": "2017-12-23T20:31:48.155Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/12.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/012/original/data?1514061108",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Blackest Black "
      }
    ]
  },
  {
    "id": 11,
    "brand": "maybelline",
    "name": "Maybelline Volum' Express The Rocket Mascara",
    "price": "10.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/0b04408a84154f14800e4c9477f8a924_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-volum-express-the-rocket_84350.html",
    "website_link": "https://well.ca",
    "description": "Explosive Volume in Rocket Time! 8X Bigger, Smoother.\n\nNow, the most explosive, beautiful lashes ever! Maybelline's patented supersonic \nbrush with micro bristles loads on big, sleek volume instantly.\n\nThe fast-glide formula keeps lashes smooth. Zero clumps!",
    "rating": null,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:10:58.856Z",
    "updated_at": "2017-12-23T20:31:47.966Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/11.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/011/original/open-uri20171223-4-iiztlg?1514061107",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Blackest Black "
      },
      {
        "hex_value": "#202020",
        "colour_name": "Very Black "
      }
    ]
  },
  {
    "id": 9,
    "brand": "maybelline",
    "name": "Maybelline Great Lash Lots of Lashes Mascara",
    "price": "7.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/dfaf77464a8cb52a1a8f2a15e8abf920_ra,w158,h184_pa,w158,h184.png",
    "product_link": "https://well.ca/products/maybelline-great-lash-lots-of-lashes_50739.html",
    "website_link": "https://well.ca",
    "description": "Introducing a Great Lash innovation - Great Lash Lots of Lashes!The favourite Maybelline mascara now gives the look of more lashes than ever, thanks to the exclusive Great Little Grabber Brush. In just one swipe, the Grabber Brush easily reaches all lashes - even \nin the corners - for a multiplied lash look without the clumps. The result? Great lashes with lots of impact and not a lot of work.For best results: sweep brush from root to \ntip of lashes. Continue building volume until the desired lash look is \nachieved. Do not let dry between coats. Removes easily with soap and \nwater or eye makeup remover. \n                    ",
    "rating": 4.2,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:10:56.475Z",
    "updated_at": "2017-12-23T20:31:47.757Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/9.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/009/original/open-uri20171223-4-axycg0?1514061107",
    "product_colors": [
      {
        "hex_value": "#000000",
        "colour_name": "Blackest Black "
      },
      {
        "hex_value": "#2d1e17",
        "colour_name": "Brownish Black "
      }
    ]
  },
  {
    "id": 8,
    "brand": "maybelline",
    "name": "Maybelline Lash Stiletto Ultimate Length Mascara",
    "price": "10.99",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/812b5ae27df9be983052063d52d7ab7a_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-lash-stiletto-ultimate_17287.html",
    "website_link": "https://well.ca",
    "description": "The only mascara that does for lashes what stilettos do for legs.\n\n    The Grip & Extend brush grasps each lash and coats from every angle\n    Elastic formula stretches lashes for provocative length\n    Pro-Vitamin B-5 formula conditions and smoothes for black-patent shine\n    Contact lens safe and Ophthalmologist tested\n    Waterproof \n\n ",
    "rating": 4.0,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:10:55.406Z",
    "updated_at": "2017-12-23T20:31:47.606Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/8.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/008/original/data?1514061107",
    "product_colors": [
      {
        "hex_value": "#0E0F11",
        "colour_name": "Very Black "
      }
    ]
  },
  {
    "id": 7,
    "brand": "maybelline",
    "name": "Maybelline Volum'Express the Falsies Mascara",
    "price": "9.79",
    "price_sign": null,
    "currency": null,
    "image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/af1f35f15ee64cc1003f1ccfc6451d71_ra,w158,h184_pa,w158,h184.jpeg",
    "product_link": "https://well.ca/products/maybelline-volumexpress-the-falsies_26311.html",
    "website_link": "https://well.ca",
    "description": "False lash glam in a tube, instantly!The Falsies Mascara delivers a false lash look, giving you a full set of voluminous, bold, fanned-out lashes and the appearance of no gaps from any angle.The Pro-Keratin Fiber enriched formula is designed to deliver immediate results, distributing volume and visible intensity to your lashes. The spoon-shaped brush helps fan lashes out.The Falsies Mascara is designed to give the appearance of no gaps and spaces. In a wink, lashes you didn’t even know you had look visibly thickened!",
    "rating": 4.0,
    "category": null,
    "product_type": "mascara",
    "tag_list": [
      
    ],
    "created_at": "2016-10-01T18:10:54.660Z",
    "updated_at": "2017-12-23T20:31:47.473Z",
    "product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/7.json",
    "api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/007/original/data?1514061107",
    "product_colors": [
      {
        "hex_value": "#0E0F11",
        "colour_name": "Very Black "
      }
    ]
  }
]
728x90