JavaScript - 배열 안 객체 원하는 값만 접근하기 (push())

• 2023.03.02(목) 2차 프로젝트 진행 중
  참고자료 | JavaScript 배열 안의 객체에서 원하는 키의 값만 출력하기, [JavaScript] 자바스크립트 배열 추가, 삭제 방법 (push, pop, splice)

---

백엔드와 통신할 때 불러올 데이터들을 다루는 법을 연구하다가 배열 안에 객체에 접근할 일이 생각보다 많다는 것을 깨닫고 배열 안 객체 값에 접근하는 법을 찾아보다가 push() 에 대해서 알게 되었다.😆

// getDetail.json
{
  "data": {
    "review": [
      {
        "reviewId": 10,
        "lectureName": "강의 3",
        "reviewUserId": 5,
        "reviewUserName": "혜린",
        "reviewDescription": "review desc 1",
        "reviewImageUrl": "review image4",
        "reviewStar": 5
      },
      {
        "reviewId": 10,
        "lectureName": "강의 3",
        "reviewUserId": 5,
        "reviewUserName": "유진",
        "reviewDescription": "review desc 2",
        "reviewImageUrl": "review image4",
        "reviewStar": 4
      },
      {
        "reviewId": 10,
        "lectureName": "강의 3",
        "reviewUserId": 5,
        "reviewUserName": "준현",
        "reviewDescription": "review desc 3",
        "reviewImageUrl": "review image4",
        "reviewStar": 3
      },
      {
        "reviewId": 10,
        "lectureName": "강의 3",
        "reviewUserId": 5,
        "reviewUserName": "홍열",
        "reviewDescription": "review desc 4",
        "reviewImageUrl": "review image4",
        "reviewStar": 4
      },
      {
        "reviewId": 10,
        "lectureName": "강의 3",
        "reviewUserId": 5,
        "reviewUserName": "원경",
        "reviewDescription": "review desc 5",
        "reviewImageUrl": "review image4",
        "reviewStar": 5
      }
    ]
  }
}

FrontEnd에서 별점들을 합산해서 평균값을 내야했기 때문에 위와 같은 Json 파일에서 내가 필요한 것은 reviewStar 데이터 값들이었다.

1. setState와 fetch()를 이용해서 review 데이터 불러오기

const [star, setStar] = useState("");

  useEffect(() => {
    fetch("/data/Detail/getDetail.json")
      .then(res => res.json())
      .then(data => setStar(data.data.review));
  }, []);
  console.log(star); // [{reviewId: 10, lectureName: "강의 3" ...},{},{}..,{}]

• setStar를 이용해서 star 안에 data.data.review 배열을 담아줌

2. 반복문 push()로 원하는 값만 추출

var arr = ['a', 'b', 'c'];

// arr = ['a', 'b', 'c', 'd']
arr.push('d'); // 배열의 끝에 요소를 추가

• push() 자체는 특정 값을 배열 안에 추가 해주는 함수!

const reviewStar = []; // 빈 배열 준비

  for (let data of star) {
    reviewStar.push(data.reviewStar); // reviewStar 값들만 반복해서 push
  }
  console.log(reviewStar); // [5,4,3,4,5]

star 안에 담긴 데이터만큼 반복해서 특정 값(reviewStar의 값)을 push 해준다.

💭 아주 유용하게, 그리고 또 자주 쓰일 것 같은 js 함수들이라 기록 📓