본문 바로가기

vue

게시판 만들기 - 정렬과 글쓴이 필드추가하기

정렬

지금은 글 번호 순서대로 정렬이 되어있다. 하지만 실제 게시판은 최신순으로 나열된다.

즉, 정렬이 반대가 되어야한다!  최근에 작성한게 앞으로 가게끔!

sort 정렬을 이용한다! 자바스크립트 공부할때 했었다.

두 요소를 뺐을 때 양수가 나오면 자리를 바꿔준다! ( 양수면 정렬 음수면 고대로 둠! )

 

결과_역순을 정렬 되었다.


글쓴이 필드 추가하기

 

게시판의 요소들은 Content 데이터들을 뿌려준것인데, Content 데이터에는 유저의 이름이 없다. 

유저의 이름은 User에서 가지고 와야한다!

그러므로 유저의 이름은 User에서 가져와야한다. 이럴때 써야하는것이 map함수!! 

 

items = items.map(contentItem => { return {

...contentItem, user_name: data.User.filter(userItem => userItem.user_id === contentItem.user_id)[0].name} })

 

items의 각각의 item들이 contentItem이 될것이다. 각각의 contentItem에다 user_name속성을 추가해준다. 

그럼 이제 user_name을 구해야한다! user_name은 data의 User 배열에 있다.

그래서 data.User에다 filter를 걸고 현재 객체 아이템의 유저아이디와 일치하는 유저아이디를 가져오도록한다. 

filter를 이용했기 때문에 일치하는 유저아이디들을 모두 가져올것이다.  

   (filter는 조건을 통과하는 모든 요소들을 모아 새로운 배열로 반환하기 때문!!!!)

유저아이디는 유일한 값이기에 중복이 존재하지 않을것이다. 때문에 언제나 배열요소는 한개뿐!!

그러므로 0번째 요소로 접근하여 객체를 가져오고, 그 객체의 name속성을 가져오도록 한다! 

 

이렇게 map함수와 filter함수를 이용해서 값을 가져올 수 있다.

결과


map() 

map은 배열 내의 모든 요소 각각에 대하여 주어진 함수를 적용하고 호출한 결과를 모아 새로운 배열에 반환한다.