[자바스크립트] JSON 데이터를 담고 있는 배열의 객체를 삭제하는 방법

서버로 부터 받아온 JSON타입의 문자열을 배열(array)에 담고 삭제하기 위해 기존에 알고 있던 splice()메서드를 사용하여 처리하였다. 서버로 부터 받아온 데이터를 화면에 table 태그를 사용하여 표현하였다.

구현된 샘플 화면은 다음과 같다.

X버튼을 누르면 삭제를 진행한다.

Vue.js 환경에서 개발중인데, 아래와 같이 splice() 함수에 인덱스 번호를 변수로 받아서 처리하였다.

    delWords(index) {
      // console.log(`${JSON.stringify(this.data.selectedList.length)}`);
      this.data.selectedList.splice(index);
    },

그런데 내가 알고 있는 splice()에 대한 정의를 다시해야하는 오늘이다. 왜냐하면 선택된 인덱스 기준값으로  그 뒤에 오는 모든 배열의 데이터가 삭제되었기 때문이다. 나는 지금까지 splice()메서드가 지정한 인덱스의 배열 객체만 삭제하는 것으로 알고 있었는데, 삭제를 시작할 인덱스 값이었다. 개발자 문서(splice)를 봐야하는 이유를 다시 한 번 절실하게 느꼈다. 문서를 보니 splice()메서드는 삭제와 동시에 배열에 데이터를 추가할 수 도 있었다.(충격)

배열에서 특정 JSON객체의 배열만 삭제해야 할 경우 

splice의 인자값은 splice(삭제 대상 시작 인덱스, 시작 인덱스 기준으로 삭제할 데이터 기준 개수)

this.data.selectedList.splice(index, 1);

샘플 JSON 데이터 타입의 배열은 다음과 같다.

[{
	"textId":1
	,"itemNm":"제품1"
	,"text":"Saltan은 타 점안용기에 .....환자들이 사용하기 편리한 제품입니다"
}
,{
	"textId":2
	,"itemNm":"제품1"
	,"text":"SX 핵심전략 ?"}
,{
	"textId":5
	,"itemNm":"제품1"
	,"text":"Google 뉴스"}
,{
	"textId":6
	,"itemNm":"제품1"
	,"text":"한미일 국방장관 "북한 미사일 위협 맞서 긴밀 공조"
}]

JSON 객체 배열의 데이터 중복 제거 하는 방법

기본 필터 사용법 포스팅을 참고하세요

splice()메서드의 구문(문법)

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

splice() 메서드 매개변수 

splice() 메서드 리턴값(반환 값)

하나도 제거하지 않고, 2번 인덱스에 “drum” 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]​

[REFERENCE]

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice