How to delete and append element in JSON array?

Question

I'm working on an Ionic 3 project in which the response http data is in JSON array format like this (from the console): Country Array (5)

0: {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"}
1: {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"}
2: {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"}
3: {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"}
4: {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}

How to (1) delete one of the above items (2) append to the last index of the above JSON array. Note: Due to some special view requirements, step 1 and 2 need to be separate. So the result JSON array will look like this:

0: {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"}
1: {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"}
3: {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"}
4: {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}
2: {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"}  <- Moved

I'd tried this code:

country.splice(country.findIndex(e => e.country === 'Korea'),1);
country = [...country];
// From console it's OK. Record deleted.
// Next append the element back:
country.push({record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"});
country = [...country];
// From console looks OK. Element appended to the last index of the Json array.

But if I run the code again:

country.splice(country.findIndex(e => e.country === 'Korea'),1);

It can not find the element Korea anymore.

Possible duplicate of [Move an array element from one array position to another](https://stackoverflow.com/questions/5306680/move-an-array-element-from-one-array-position-to-another) — Renato Gama, Mar 21 '18 at 14:19
If you delete it again why are you surprised not seeing it anymore ? — Gabriel Bleu, Mar 21 '18 at 14:20

Joshua Manns · Accepted Answer · 2018-03-21T15:08:48.157

1

It looks like you're doing some unnecessary destructuring with the spread operator. Here's a simple example using functions:

Example

let myCountries = [
  {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"},
  {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"},
  {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"},
  {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"},
  {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}
];

function removeCountry(country, countries) {
  const index = countries.findIndex(c => c.country === country);
// Note: Country not found will mean index is -1
// which will remove the last country from the array.
  return countries.splice(index, 1);
}

function appendCountry(country, countries) {
  if (!country) return;

  countries.push(country);

  return countries;
}

// Usage:

const remove = removeCountry('Korea', myCountries);
appendCountry(remove);

Update I've given an example of how to use this and save the removed country to a variable for easier appending.

edited Mar 21 '18 at 15:08

answered Mar 21 '18 at 14:29

Joshua Manns

525
4
6

This doesn't allow you to hold on to the target country in between the remove and the add. Would that require separate work? – Scott Sauyet Mar 21 '18 at 14:51
@ScottSauyet All that requires is a `return` of the splice result from `removeCountry`. I've updated my answer with an example usage. – Joshua Manns Mar 21 '18 at 15:09
That works. A nice answer. My answer is similar but treats the data as immutable. – Scott Sauyet Mar 21 '18 at 15:44
Thank you all. Unfortunately I'm still struggling on this as I do need to make the findIndex logic to work after delete (using findIndex) -> push back the same element (last position) -> delete again using findInex (failed). And I have to do it without same module functions. The first deleted array will pass to a 3rd party sort function then it will pass back the result and I will append the record back. And this process will repeat again and again. – LHLK Mar 21 '18 at 18:36
Thank you Joshua Manns. Your code enlighten me solving the problems. – LHLK Mar 22 '18 at 07:44

score 1 · Answer 2 · answered Mar 21 '18 at 14:30

you could do it like this:

let country = [
    { record_id: "1", local_TimeStamp: "16:00:00", country: "USA" },
    { record_id: "2", local_TimeStamp: "17:00:00", country: "Japan" },
    { record_id: "3", local_TimeStamp: "17:00:00", country: "Korea" },
    { record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand" },
    { record_id: "5", local_TimeStamp: "16:00:00", country: "China" }
];
const korea = country.splice(country.findIndex(e => e.country === 'Korea'), 1);
country = [...country, ...korea];

score 0 · Answer 3 · answered Mar 21 '18 at 14:23

Use array.prototype.slice, array.prototype.find and spread:

var arr = [
    {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"},
    {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"},
    {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"},
    {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"},
    {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}
];

var index = arr.findIndex(e => e.country === "Korea");    
var a = arr.slice(0, index);
var b = arr.slice(index + 1);
var c = arr.find(e => e.country === "Korea");

var result = [...a, ...b, c];

console.log(result);

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

Renato Gama's comment might do the trick for you. But if you need to do these steps separately:

How to (1) delete one of the above items

You can use Array.prototype.filter to get an array without certain record, for example: myArray.filter(record => record.country !== "Korea"). But considering you want to add the record again, you could use Array.prototype.splice, like this:

var removed = myArray.splice(/* arguments */);

Above would be step 1 and step 2 would be pushing it again - myArray.push(removed);

But if I run the code again:

country.splice(country.findIndex(e => e.country === 'Korea'),1);

It can not find the element Korea anymore.

You can't find the element, since you removed it with splice and didn't save removed element to a variable.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 21 '18 at 14:25

Tomasz Bubała

2,093
1
11
18

I'm still having problem on this. Well, one thing I really don't understand is why the findIndex failed after push back the exact element. The search suppose using the country value as the key. Any idea? I need this findIndex to work for my logic. Thanks. – LHLK Mar 21 '18 at 18:19
1

Thanks Tomasz Bubala. Your clear explanation helps me. – LHLK Mar 22 '18 at 09:48

Scott Sauyet · Answer 5 · 2018-03-21T15:46:44.670

Something like this might do it, although the indices you supply in your expected output don't make sense to me:

const originalCountries = [
  {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"},
  {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"},
  {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"},
  {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"},
  {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}
];

const removeCountry = (name, countries) => {
  const idx = countries.findIndex(c => c.country === name);
  return idx > -1 
      ? {
           countries: countries.slice(0, idx).concat(countries.slice(idx + 1)), 
           country: countries[idx]
        }
      : {countries, country: null};
};

const addCountry = (country, countries) => countries.concat(country);

console.log('Step 1');
const {countries, country} = removeCountry('Korea', originalCountries);
console.log(countries);

console.log('Step 2');
const updatedCountries = addCountry(country, countries);
console.log(updatedCountries);

How to delete and append element in JSON array?

5 Answers5