Push new data to array, if indices match

Question

I have a variable called "animeData" that contains an array of objects.

{"table":[{"id":1,"name":"K-on","redirect":"k-on","thumbnail":"/images/anime/k-on/thumbnail.jpg","characters":[{"name":"azusa","thumbnail":"/images/anime/k-on/azusa.jpg","votes":[{"ip":"127.0.0.1"}]},{"name":"mio","thumbnail":"/images/anime/k-on/mio.jpg","votes":[{}]},{"name":"mugi","thumbnail":"/images/anime/k-on/mugi.jpg","votes":[{}]},{"name":"ritsu","thumbnail":"/images/anime/k-on/ritsu.jpg","votes":[{}]},{"name":"yui","thumbnail":"/images/anime/k-on/yui.jpg","votes":[{}]}]},{"id":2}]}

I am trying to add a new set of information, under the ID 2, like I did for 1, starting with the name. I have tried animeData.table.filter(x => x.id === 2).push({"name": "Bunny Girl Senpai"}); However, there are no errors in the console but nor does the "animeData" var change.

the animeData won't be changed, Array.prototype.filter() returns a new array — zb22
– zb22, Commented Mar 7, 2021 at 17:10
It is unclear what exactly you're trying to achieve. Do you want to push a new character to the characters array? Or change the name of a table with id 2? — Keimeno
– Keimeno, Commented Mar 7, 2021 at 17:18
I am trying to add a new set of information (name, redirect, thumbnail, characters) but under the ID 2, so completely seperate to the others. — Tim Birtles
– Tim Birtles, Commented Mar 7, 2021 at 17:21

DecPK · Accepted Answer · 2021-03-07 17:20:50Z

The filter method of an array returns an array containing the filtered elements, it is an array of objects. As we get the single object in an array then we can go for that object with array indexing as filteredData[0]. As it is an object then we can set the property of an object using . notation or [] syntax. Both are valid.

const animeData = {
  table: [
    {
      id: 1,
      name: "K-on",
      redirect: "k-on",
      thumbnail: "/images/anime/k-on/thumbnail.jpg",
      characters: [
        {
          name: "azusa",
          thumbnail: "/images/anime/k-on/azusa.jpg",
          votes: [{ ip: "127.0.0.1" }],
        },
        { name: "mio", thumbnail: "/images/anime/k-on/mio.jpg", votes: [{}] },
        { name: "mugi", thumbnail: "/images/anime/k-on/mugi.jpg", votes: [{}] },
        {
          name: "ritsu",
          thumbnail: "/images/anime/k-on/ritsu.jpg",
          votes: [{}],
        },
        { name: "yui", thumbnail: "/images/anime/k-on/yui.jpg", votes: [{}] },
      ],
    },
    { id: 2 },
  ],
};

const idToSearch = 2;
const filteredData = animeData.table.filter((x) => x.id === 2);
if (filteredData.length) {
  const filteredObject = filteredData[0];
  filteredObject["name"] = "Bunny Girl Senpai";
}
console.log(animeData);

or with find

const animeData = {
  table: [
    {
      id: 1,
      name: "K-on",
      redirect: "k-on",
      thumbnail: "/images/anime/k-on/thumbnail.jpg",
      characters: [
        {
          name: "azusa",
          thumbnail: "/images/anime/k-on/azusa.jpg",
          votes: [{ ip: "127.0.0.1" }],
        },
        { name: "mio", thumbnail: "/images/anime/k-on/mio.jpg", votes: [{}] },
        { name: "mugi", thumbnail: "/images/anime/k-on/mugi.jpg", votes: [{}] },
        {
          name: "ritsu",
          thumbnail: "/images/anime/k-on/ritsu.jpg",
          votes: [{}],
        },
        { name: "yui", thumbnail: "/images/anime/k-on/yui.jpg", votes: [{}] },
      ],
    },
    { id: 2 },
  ],
};

const idToSearch = 2;
const search = animeData.table.find((anime) => anime.id === 2);
search["name"] = "TemporaryName";
search["redirect"] = "temp";
console.log(animeData);

Alex Riveron · Accepted Answer · 2021-03-07 17:23:05Z

1

Array.prototype.filter() according to MDN Web Docs returns a new array.

What you probably want to use is Array.prototype.find() instead, which according to MDN Web Docs returns the value of the first element in the provided array that satisfies the provided testing function.

Since find() is going to return an object, I think you would also just want to set the name property instead of pushing it. Something like this:

animeData.table.find(x => x.id === 2)["name"] = "Bunny Girl Senpai";

Be careful with find() method, if it is not able to find an element it will return undefined.

answered Mar 7, 2021 at 17:23

Alex Riveron

4112 silver badges10 bronze badges

Collectives™ on Stack Overflow

Push new data to array, if indices match

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related