# item in array not defined

**URL:** <https://talk.observablehq.com/t/item-in-array-not-defined/8713>\
**Category:** Help\
**Created:** [January 20, 2024, 7:36pm UTC](https://talk.observablehq.com/t/item-in-array-not-defined/8713 "2024-01-20T19:36:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbhttchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rbhttchr/32/3261_2.png) [@rbhttchr](https://talk.observablehq.com/u/rbhttchr)\
**Post date:** [January 20, 2024, 7:36pm UTC](https://talk.observablehq.com/t/item-in-array-not-defined/8713/1 "2024-01-20T19:36:43Z")

</div>

Hi,

I am trying to generate a square via some functions, and am getting the error ‘item’ is not defined, from the second choice onwards. That is, if rem ===0, no error. Error begins with else if item \> 12. Here is the notebook:  
[https://observablehq.com/@rbhttchr/magic-square](https://observablehq.com/@rbhttchr/magic-square)

function magic(Array, rem, quot) {  
if (rem === 0)  
return Array.map((item) =\> item + quot);  
else if (rem === 1)  
return Array.map((item) \> 12 ? (item + quot + 1) : (item + quot));  
else if (rem === 2)  
return Array.map(item \> 8 ? item + quot + 1 : item + quot);  
if (rem === 3) return Array.map(item \> 4 ? item + quot + 1 : item + quot);  
}

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [January 20, 2024, 8:22pm UTC](https://talk.observablehq.com/t/item-in-array-not-defined/8713/2 "2024-01-20T20:22:37Z")

</div>

Those map functions are missing the `(item) =>` bits… the argument for the map function should be a function 😀

---

<div class="post-metadata">

**Author:** ![rbhttchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rbhttchr/32/3261_2.png) [@rbhttchr](https://talk.observablehq.com/u/rbhttchr)\
**Post date:** [January 20, 2024, 8:24pm UTC](https://talk.observablehq.com/t/item-in-array-not-defined/8713/3 "2024-01-20T20:24:38Z")

</div>

Thanks so much, silly me!

---

<div class="post-metadata">

**Author:** ![rbhttchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rbhttchr/32/3261_2.png) [@rbhttchr](https://talk.observablehq.com/u/rbhttchr)\
**Post date:** [January 20, 2024, 8:36pm UTC](https://talk.observablehq.com/t/item-in-array-not-defined/8713/4 "2024-01-20T20:36:55Z")

</div>

How can I style this array into a nice 4x4 square? I have been looking for examples, but could not find any.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [January 20, 2024, 10:27pm UTC](https://talk.observablehq.com/t/item-in-array-not-defined/8713/5 "2024-01-20T22:27:34Z")

</div>

Maybe with Plot?

```auto
Plot.plot({
  axis: null,
  inset: 30,
  width: 150,
  height: 150,
  marks: [
    Plot.frame(),
    Plot.text(yourArray, { frameAnchor: "middle", fx: (d, i) => i % 4, fy: (d, i) => Math.floor(i / 4) })
  ]
})

```

 ![Capture d’écran 2024-01-20 à 14.23.54](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/8f5b8a840f9a072e7143c02440852af2cae474e7.png)

maybe that’s too big of a hammer, and you’d rather do this in HTML?

```auto
<table>
  <tr>${yourArray.slice(0, 4).map(d => html`<td>${d}</td>`)}</tr>
  <tr>${yourArray.slice(4, 8).map(d => html`<td>${d}</td>`)}</tr>
  <tr>${yourArray.slice(8, 12).map(d => html`<td>${d}</td>`)}</tr>
  <tr>${yourArray.slice(12, 16).map(d => html`<td>${d}</td>`)}</tr>
</table>

```

 ![Capture d’écran 2024-01-20 à 14.26.50](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/5d3d27766ba1a381b97cc6b7bd29dfa3384f7d92.png)

---

<div class="post-metadata">

**Author:** ![rbhttchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rbhttchr/32/3261_2.png) [@rbhttchr](https://talk.observablehq.com/u/rbhttchr)\
**Post date:** [January 20, 2024, 10:32pm UTC](https://talk.observablehq.com/t/item-in-array-not-defined/8713/6 "2024-01-20T22:32:47Z")

</div>

Plot is the perfect hammer, thank you so much!