객체 배열에 속성 추가


110

아래와 같이 객체 배열이 있습니다.

Object {Results:Array[2]}
     Results:Array[2]
[0-1]
0:Object
       id=1     
       name: "Rick"
1:Object
       id=2     
       name:'david'

이 개체 배열의 각 요소에 Active라는 속성을 하나 더 추가하고 싶습니다.

최종 결과는 다음과 같습니다.

Object {Results:Array[2]}
     Results:Array[2]
[0-1]
0:Object
       id=1     
       name: "Rick"
       Active: "false"
1:Object
       id=2     
       name:'david'
       Active: "false"

누군가이 이것을 달성하는 방법을 알려주십시오.


6
배열을 반복합니다. 반복하는 동안 각 배열 요소에 속성을 추가합니다. 수행하는 방법을 모르는 부분은 무엇입니까?
JJJ

답변:


158

forEach메서드를 사용 하여 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행할 수 있습니다 . 이 제공된 함수 Active에서 요소에 속성을 추가 할 수 있습니다 .

Results.forEach(function (element) {
  element.Active = "false";
});

224

또는 사용 map

Results.map(obj=> ({ ...obj, Active: 'false' }))

원본을 변경하지 않고 각각에 대해 새 개체를 반환하도록 @adrianolsk의 주석을 반영하도록 편집되었습니다.

사양 읽기


4
ES6에서만 지원
Amaynut

5
) -하지만 바벨은 행복하게 디 컴파일 것이다 ES5는 정확합니다
sidonaldson

51
지도 대해 forEach 더 나은 것,이 경우, 새로운 배열 개체를 변이하지 돌아가거나 사용지도와 새로운 개체를 반환해야합니다Results.map(obj=> ({ ...obj, Active : 'false' }))
adrianolsk

4
훌륭한 솔루션 @adrianolsk, 별도의 답변으로 제출해야합니다.
Michael Hays


1

나는이 문제에 대해서도 생각해 냈고, 그것을 해결하기 위해 내 앱을 실행하는 크롬 탭을 계속 충돌시켰다. 객체에 대한 스프레드 연산자 처럼 보입니다. 범인이었다.

adrianolsk의 의견과 위의 sidonaldson의 답변에서 약간의 도움을 받아 다음과 같이 바벨의 스프레드 연산자 출력 인 Object.assign ()을 사용했습니다 .

this.options.map(option => {
  // New properties to be added
  const newPropsObj = {
    newkey1:value1,
    newkey2:value2
  };

  // Assign new properties and return
  return Object.assign(option, newPropsObj);
});

0

키-값 구조로 객체를 통과합니다. 그런 다음 'Active'라는 새 속성과이 속성에 대한 샘플 값 ( 'Active)을이 개체 ​​내부의 모든 단일 개체에 추가합니다. 이 코드는 객체의 배열과 객체의 객체 모두에 적용될 수 있습니다.

   Object.keys(Results).forEach(function (key){
            Object.defineProperty(Results[key], "Active", { value: "the appropriate value"});
        });

예, 키-값 구조로 개체를 통과합니다. 그런 다음 'Active'라는 새 속성과이 개체 내부의 모든 단일 개체에 샘플 값을 추가합니다. 이 코드는 객체의 배열과 객체의 객체 모두에 적용될 수 있습니다.
Arash MAS

0

ES6를 사용하면 간단하게 다음을 수행 할 수 있습니다.

 for(const element of Results) {
      element.Active = "false";
 }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.