How do I use this color object?

Question

I do have an array of objects (book) here. My question is: How do I use the "color" object so each book has its color property? I think it has to be something like this -> book[amount].color <- but I can't make it work.

I don't know how to call the color property.

This is the array of objects:

var book = [

    {title: "The Giver",
    stars: 3,
    author: "Lowry Loys",
    color: color(0, 38, 255), //How do I make this property work in the code?
    image: true},

    {title: "How to win friends",
    stars: 5,
    author: "Dale Carnegie",
    color: color(214, 255, 219),
    image: false},

    {title: "Principios fund. de la filosofía",
    stars: 5,
    author: "Georges Politzer",
    color: color(115, 0, 255),
    image: false}
];

This is the code

 // draw shelf
    fill(173, 117, 33);
    rect(0, 120, width, 10);

// draw books + title + author
for (var amount = 0; amount < book.length; amount++) { //draw books
    fill(214, 255, 219);
    rect(154*amount, 20, 90, 100);
    fill(0, 0, 0);
    textSize(13);
    text(book[amount].title, 5 + 158*amount, 27, 68, 100); //draw title
    textSize(10);
    text(book[amount].author, 5 + 155*amount, 91, 75, 100); //draw author

    for (var s = 0; s < book[amount].stars; s++) { //draw stars
    image(getImage("cute/Star"), 11 + s * 15 + amount * 151, 98, 15, 22);
    }

    for (var i = 0; i < book[amount].image; i++) { //draw stars
    image(getImage("avatars/aqualine-sapling"), 9 + i * 60 + amount * 46, 42, 36, 39);
    }
}

Unless `color` is a function `color: color(0, 38, 255),` isn't going to work as an object property. It probably needs to be `color: 'color(0, 38, 255)',`. — Andy, Feb 20 '18 at 16:00
`book[amount].color` is the correct way to access it. What error are you getting? — 4castle, Feb 20 '18 at 16:02

score 0 · Answer 1 · answered Feb 20 '18 at 16:12

Assuming you don't have a color function, you'll have to quote those properties and then extract the color information.

In this simple example a regex grabs the color values from the (index 1) object, and then sets the background color of a temporary element.

var book=[{title:"The Giver",stars:3,author:"Lowry Loys",color:'color(0, 38, 255)',image:!0},{title:"How to win friends",stars:5,author:"Dale Carnegie",color:'color(214, 255, 219)',image:!1},{title:"Principios fund. de la filosofía",stars:5,author:"Georges Politzer",color:'color(115, 0, 255)',image:!1}]

const result = document.getElementById('result');
const color = book[1].color.match(/(\d+)/g);
result.style.backgroundColor = getColor(color);

function getColor(color) {
  return `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
}

<div id="result">sdfdsfdsf</div>

score 0 · Answer 2 · answered Feb 20 '18 at 16:32

The color function doesn't exist in plain javascript. I think the easiest way will be to store your colors as a HEXs in strings like below:

var book = [{
    title: "The Giver",
    stars: 3,
    author: "Lowry Loys",
    color: "#0026ff", // converted rgb(0, 38, 255)
    image: true
}];

book[0].color; // "#0026ff"

You can use e.g. this tool to manually convert colors to HEX. If you don't like it just implement your own color function to convert rgb to hex (link).

Here you can also find an interesting npm package named Qix-/color:

JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

Hope it helps!

Thank you very much! However, where I am supposed to write this line of code? book[0].color; It doesn't seem to be working. — Adrian Danlos, Feb 20 '18 at 16:50
Inside your `for` loop since it looks like you have access to your book object there? `book[amount].color` — robi24, Feb 21 '18 at 06:12

How do I use this color object?

2 Answers2