i want to search and change array value in reactjs

Question

I'm new in react

I try to search and change value like this.

ny: "76"  ->  ny: "apple"
ny: "12"  ->  ny: "banana"

How can I do this?

I tried like this.

const source = [{
        nx: "98",
        ny: "76",
        category: "WSD",
        fcstDate: "20210625",
        fcstTime: "1500",
        fcstValue: "2.9",
    },
    {
        nx: "98",
        ny: "12",
        category: "S06",
        fcstDate: "20210625",
        fcstTime: "1200",
        fcstValue: "0",
    },
]

const newArray = source
.filter(({ny}) => ny === "76")
.forEach((source) => (source.ny = "apple"));

Source

const source = [
  {
    nx: "98",
    ny: "apple",
    category: "WSD",
    fcstDate: "20210625",
    fcstTime: "1500",
    fcstValue: "2.9",
  },
  {
    nx: "98",
    ny: "banana",
    category: "S06",
    fcstDate: "20210625",
    fcstTime: "1200",
    fcstValue: "0",
  },
]

Are you wanting to search for and update a single value? multiple specific values? What have you tried on your own already? Stackoverflow isn't a code writing service. — Drew Reese
– Drew Reese, Commented Jun 25, 2021 at 7:22
Can you share a Minimal, Complete, and Reproducible Code Example for anything you've tried? Even if it isn't working, that's ok. — Drew Reese
– Drew Reese, Commented Jun 25, 2021 at 7:34

Drew Reese · Accepted Answer · 2021-06-25 07:48:15Z

3

Issue

const newArray = source
  .filter(({ny}) => ny === "76")
  .forEach((source) => (source.ny = "apple"));

This would first filter the source array for elements that have a ny property equal specifically to "76", and then the forEach mutates the element. This overall won't even work for a single value because forEach is a void return.

Solution

As far as I can tell, you probably don't want to filter the source array, this removes elements from the result.

This is just one possible solution.

Create a map of the ny keys you want to convert to fruits, then iterate over the source array and check if there is a ny key/value in the map and if there is, return a shallow copy of the current element with updated ny property.

const convertMap = {
  76: "apple",
  12: "banana",
};

const res = source.map(el => {
  if (convertMap[el.ny]) {
    return {
      ...el,
      ny: convertMap[el.ny],
    };
  }
  return el;
});

const convertMap = {
  76: "apple",
  12: "banana",
};

const source = [
  {
    nx: "98",
    ny: "76",
    category: "WSD",
    fcstDate: "20210625",
    fcstTime: "1500",
    fcstValue: "2.9",
  },
  {
    nx: "98",
    ny: "12",
    category: "S06",
    fcstDate: "20210625",
    fcstTime: "1200",
    fcstValue: "0",
  },
];

const res = source.map(el => {
  if (convertMap[el.ny]) {
    return {
      ...el,
      ny: convertMap[el.ny],
    };
  }
  return el;
});

console.log(res);

edited Jun 25, 2021 at 7:48

answered Jun 25, 2021 at 7:31

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SeoIn Choi Over a year ago

im not english speaker so my english is quite wired, but i really thx you so much!!!!!

SeoIn Choi Over a year ago

ok thx! i got this message, "You need at least 15 reputation to cast a vote, but your feedback has been recorded." if i get 15 reputation, i will be back this page and vote for you. thank you! :D

akash ingole · Accepted Answer · 2021-06-25 12:48:57Z

0

Here is my solution...

  const arr = source.map(el => {
  return {...el, ny: el['ny'] === '76' ? 'Apple' : el['ny']}
  })
  console.log('arr', arr);

We will simply traverse our array and return the object with the new value being set for our search key. And rest map will take care. I hope this helps.

edited Jun 25, 2021 at 12:48

answered Jun 25, 2021 at 12:38

akash ingole

1611 silver badge2 bronze badges

Collectives™ on Stack Overflow

i want to search and change array value in reactjs

2 Answers 2

Issue

Solution

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issue

Solution

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related