CODEWITHSUNDEEP
javascriptarrays
Tim Birtles
Tim Birtles

Reputation: 147

Push new data to array, if indices match

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.

Upvotes: 0

Views: 52

Answers (2)

Alex Riveron
Alex Riveron

Reputation: 411

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.

Upvotes: 1

DecPK
DecPK

Reputation: 25408

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);

Upvotes: 2

Related Questions