# Data of cell changes when I expand view

**URL:** <https://talk.observablehq.com/t/data-of-cell-changes-when-i-expand-view/5980>\
**Category:** Help\
**Created:** [December 20, 2021, 10:04pm UTC](https://talk.observablehq.com/t/data-of-cell-changes-when-i-expand-view/5980 "2021-12-20T22:04:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![foundflavor](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/foundflavor/32/2216_2.png) [@foundflavor](https://talk.observablehq.com/u/foundflavor)\
**Post date:** [December 20, 2021, 10:04pm UTC](https://talk.observablehq.com/t/data-of-cell-changes-when-i-expand-view/5980/1 "2021-12-20T22:04:19Z")

</div>

Hey, there. I’m having a strange issue with some data loaded from a CSV file. The notebook is here: [The Most Unique Comic Book Characters / Jon Schultz / Observable](https://observablehq.com/d/cb121f86639f0b7e)

I’m trying to do some macro analysis of the data in the attached file, a collection of comic book character names, with their respective publisher name and a collection of boolean values for if they do/don’t have certain powers.

The notebook is importing the data from the CSV just fine with this code:

```auto
heroesFull = d3.csvParse(await FileAttachment("Heroes_Powers@2.csv").text())

```

Upon loading the notebook, the second cell is correctly referencing a specific row of data in that CSV

```auto
heroesFull[238]

```

I’m getting the expected result of Name: “Man of Miracles”, Publisher: “Image Comics”, etc.

However, anytime I click the expand arrow on that cell, or even re-run that cell, it changes the value of that cell to be an array of all the “Name” values in the original dataset. This doesn’t seem to happen with other rows from that data set.

Any idea what’s going on here?

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [December 21, 2021, 2:45am UTC](https://talk.observablehq.com/t/data-of-cell-changes-when-i-expand-view/5980/2 "2021-12-21T02:45:27Z")

</div>

Sup @foundflavor! In the cell `heroesUniqueness` you write:

```auto
let name = [];
…
name = heroesFull[238]
…
for (let i = 0; i < heroesFull.length; i++) {
    name[i] = heroesFull[i].Name;
    …
}
…

```

(I found this by opening the new “Find and Replace” sidebar with the 🔍 icon on the right and searching for 238.)

This assigns the hero object with index 238 to the name `name`. Then it loops over all heroes and assigns each of their names to the key `i` of `name`. So hero 238 ends up with the names of all the heroes, in addition to its original properties. If you check `heroesFull[238].Name`, you can see it still has it (“Man of Miracles”) — it just has six hundred properties (0, 1, 2…) that show up in the inspector first. It looks like an array, but it’s still the same object; `heroesFull[238].length` is undefined.

The first time you load the notebook, `heroesFull[238]` runs before `heroesUniqueness`, so it shows the original value. When `heroesUniqueness` mutates the value of item 238, Observable doesn’t know that anything has changed, so it doesn’t update the inspector. But when you expand it or re-run it or anything, you see the mutated version of the object.

I’m probably over-explaining here; it seems like maybe you just forgot you had the line `name = heroesFull[238]` in there. It seems like it’s not really doing anything; you had already declared `let name = [];`, and things seem to work fine without it.

This sort of surprising behavior often results from mutation; when I saw your question, the first thing I did was look for code that was mutating `heroesFull`. There are various explanations of mutation in JavaScript; this was just one of the top Google results: [Arrays, Objects and Mutations. Here are some thoughts on how to avoid… | by Federico Knüssel | Medium](https://medium.com/@fknussel/arrays-objects-and-mutations-6b23348b54aa).

Mutation is fine and common and natural and useful in plenty of programming environments, but in Observable, we recommend avoiding mutating the value of one cell from another cell. This and other advice is explained in this notebook:

> **[Observable anti-patterns and code smells](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells)**
>
> Here are a few things that you might do a bunch in JavaScript ‘in general’ but are often more trouble than they're worth within in the context of Observable. Table of contents Timers: use them sparingly, a lot of times there’s a better way Mutation:...

---

<div class="post-metadata">

**Author:** ![foundflavor](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/foundflavor/32/2216_2.png) [@foundflavor](https://talk.observablehq.com/u/foundflavor)\
**Post date:** [December 21, 2021, 3:06am UTC](https://talk.observablehq.com/t/data-of-cell-changes-when-i-expand-view/5980/3 "2021-12-21T03:06:58Z")

</div>

Thank you! Such a silly thing to miss. Nevertheless, I appreciate the thorough explanation. Cheers.