CODEWITHSUNDEEP
javascriptreactjsobjectnext.jsuse-state
Sanjana Ekanayake
Sanjana Ekanayake

Reputation: 353

update the array of object using useState hook

I am working on next js project and I have the following input object array set to the filesize useState. Here the keys can be considered as the indices of file list and the value is the size of that particular file Let's say 2nd index key-value pair is removed from the file list. Then I need to change the fileSize usestate in the way that all the values from 2nd index should be moved up. I have provided a input object list and the output object list that I want to have as the result

input file Object Array:    
   {
      0: 39768
      1: 13264
      2: 69432
      3: 4567
      4: 789
    }
output file Object Array:
    {
      0: 39768
      1: 13264
      2: 4567 
      3: 789
    }

So Far I have tried this way

const [fileSize,setFileSize] = useState({});

//Here I set the input files array to setFileSize usestate and this is working fine

setFileSize(fileSize => ({
            ...fileSize,
            [num]: f.size,
          }))

Now I need to shift up the values from the index that file is removed. That means above output array should be set to fileSize useState. I tried below code But this is not working properly

    var length = Object.keys(fileSize).length;

    setFileSize(fileSize => {
      return Object.entries(fileSize).map(([key, value]) => {
           if(key>index && key<length-1){
             return {[parseInt(key)-1]: value}
           }
      })
  });

I need your help to change the fileSize state from input array to output array. Any help would be much appreciated

Upvotes: 3

Views: 103

Answers (3)

Marios Nikolaou
Marios Nikolaou

Reputation: 1336

Check my answer, I used foreach() and if key == index delete object property. Tested.

Updated.

let index = 2;
let fileSize = { 0: 39768, 1: 13264, 2: 4567, 3: 789 };

Object.entries(fileSize).forEach(([key, value]) => {
  //delete object index key
  if(key == index){ 
    delete fileSize[key];
  };
  
  //the rest iterations after index delete, move up the key value pairs
  if(key > index){
    Object.assign(fileSize,{[key-1]: value});
    delete fileSize[key];
  }
});

console.log(fileSize);

Upvotes: 1

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

You can first Array.prototype.filter() the Object.entries() of fileSize and finally Array.prototype.reduce() to get the object with array indexes as keys for each of the values

Code:

const index = 1
const fileSize = { 0: 39768, 1: 13264, 2: 4567, 3: 789 }

const result = Object
  .entries(fileSize)
  .filter(([k]) => +k !== index)
  .reduce((a, [, v], i) => (a[i] = v, a), {})

console.log(result)

Upvotes: 1

Hotwer
Hotwer

Reputation: 150

What you're looking for is the function filter, map won't help you in this case since what map does is transform the array object into another array object, without skipping any (retuning null or not retuning a value would just make null and undefined values show up where the value supposed to be removed was).

Upvotes: 1

Related Questions