# P5.js Object array of title names are not being recognized

**URL:** <https://discourse.processing.org/t/p5-js-object-array-of-title-names-are-not-being-recognized/12224>\
**Category:** Coding Questions\
**Created:** [June 21, 2019, 1:03am UTC](https://discourse.processing.org/t/p5-js-object-array-of-title-names-are-not-being-recognized/12224 "2019-06-21T01:03:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 21, 2019, 1:03am UTC](https://discourse.processing.org/t/p5-js-object-array-of-title-names-are-not-being-recognized/12224/1 "2019-06-21T01:03:09Z")

</div>

Before adding the stars I’m trying to figure out **why the titles are not appearing** on the book objects. I’m sure it’s a simple oversight on my part, but if anyone can help it is sincerely appreciated!

```auto
var myBooks = [
{
    title: "The Giver",
    stars: 4
},
{   
    title: "Tess",
    stars: 5
},
{   
    title: "Great Gatsby",
    stars: 5
}
];

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

var x = 10;

for (var i = 0; i < myBooks.length; i++){
    fill (214, 255, 219);
    noStroke();
    rect (x, 20, 90, 100);
    fill(0, 0, 0);
    text (myBooks.title, x, 30, 70, 100);
    //image(getImage("cute/Star"), 13 + i * 20, 90. 20, 30);

    x = x + 100;
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 21, 2019, 2:21am UTC](https://discourse.processing.org/t/p5-js-object-array-of-title-names-are-not-being-recognized/12224/2 "2019-06-21T02:21:57Z")

</div>

Your `myBooks` variable is an array.

What is `myBooks.title`? Is there an element in your array at index ‘title’? Nope!

`myBooks[0]`, however, is the first book in the array. It has a title!

The fix is on the line that draws your text:

```auto
text (myBooks[i].title, x, 30, 70, 100);

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 21, 2019, 3:09am UTC](https://discourse.processing.org/t/p5-js-object-array-of-title-names-are-not-being-recognized/12224/3 "2019-06-21T03:09:47Z")

</div>

Thank you @TfGuy44!! 😀 My previous attempts to place the [i] were all wrong.

And now I want to show the stars. Each row of stars should appear within the book object near bottom edge. \*\*\ ***Please see comment line above code for stars placement for the area in question.**

```auto
var myBooks = [
{
    title: "The Giver",
    stars: 4
},
{   
    title: "Tess",
    stars: 5
},
{   
    title: "Great Gatsby",
    stars: 5
}
];

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

var x = 10;

for (var i = 0; i < myBooks.length; i++){
    fill (214, 255, 219);
    noStroke();
    rect (x, 20, 90, 100);
    fill(0, 0, 0);
    text (myBooks[i].title, x, 30, 70, 100);

//I'm not sure what the syntax here should be to show the stars
    image (myBooks[i].stars.getImage("cute/Star"), 13 + i * 20, 90. 20, 30); 

    x = x + 100;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 21, 2019, 3:47am UTC](https://discourse.processing.org/t/p5-js-object-array-of-title-names-are-not-being-recognized/12224/4 "2019-06-21T03:47:59Z")

</div>

```auto
//I'm not sure what the syntax here should be to show the stars image
(myBooks[i].stars.getImage("cute/Star"), 13 + i * 20, 90. 20, 30);

```

should be more like ( untested )

```auto
text (myBooks[i].title, 10, i * 30, 70, 100);
for (var k = 0; k < myBooks[i].stars ; k++){
  image( star, 13 + k * 20, 20+i * 30);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 21, 2019, 5:57am UTC](https://discourse.processing.org/t/p5-js-object-array-of-title-names-are-not-being-recognized/12224/5 "2019-06-21T05:57:05Z")

</div>

> [@debxyz](#):
>
> `image(myBooks[i].stars.getImage("cute/Star"),`

- _myBooks_ is a global variable which refers to an Array of 3 objects.
- Each of those 3 objects got 2 properties: _title_ & _stars_.
- Property _title_ is of datatype String.
- While property _stars_ is of datatype Number.
- A JS Number doesn’t have any method named **getImage()**.