addTodoLists(resp)

function addTodoLists(resp){
    // toDoListsTable 이 있는지 확인
    // 그 다음 있으면 요소 삭제, 없으면 그대로 진행
    // 그러고 toDoLists에 테이블 id = toDoListsTable - resp 추가하기

    var todo = resp;
    var tableCheck = !!document.getElementById("toDoListsTable");

    // toDoListsTable이란 요소가 있다면 tableCheck에는 true가 들어감
    // true일 경우 요소를 삭제한 뒤 테이블을 다시 만들기
    if(tableCheck){
        console.log(tableCheck);
        tableCheck.remove();

    }
    console.log("addTodoLists");
    console.log(todo);
}

앞으로 추가해야될 코드

1) resp를 담은 todo 안에 총 몇개의 todolist가 있는지 변수에 담기
var todoCount = resp.length;

문제점 : 자바스크립트를 통해 map 데이터 가져오기..


코드

    console.log(todo);
    console.log(typeof(todo));
    for (var obj of todo){
        console.log(obj);
        console.log(typeof obj);
        temp = obj;
        console.log(temp[2]);
    }


결과
image 애초에 데이터타입이 object로 나오는데 자꾸 map.get을 쓸라해서 시간을 날렸다..


Object.entries()를 통해 다시 진행

    for (var obj of todo){
        console.log(obj);
        console.log(typeof obj);
        temp = Object.entries(obj).map(x=>x.join(":")).join("\n");
        console.log(temp);
    }


결과
image 이제 이렇게 쪼개지는 것 중에서 필요한 데이터만 따로 출력하면 되는데..


    var str = '';
    for (const [p, val] of Object.entries(todo)) {
        str += `${p}:${val}\n`;
    }
    console.log(str);

이렇게는 안된다
결과는
image


    for (var obj of todo){
        temp = Object.entries(obj).map(x=>x.join(":")).join("\n");
        console.log(temp);
        first = obj[Object.keys(obj)[2]];
        console.log(first);
    }

object의 순서대로 키 값 가져오는거 성공!
image 이제 테이블에 추가하면 끝!!


2) 변수의 개수에 맞게 반복문으로 toDoLists 태그 안에 테이블 생성

    for (var i=0; i<todoCount; i++){
        toDoTable += "<tr>";
        // 테이블엔느 컬러, 콘텐츠, 실행여부 순서대로 td 추가

        for (var obj of todo){
            first = obj[Object.keys(obj)[2]];
            toDoTable += "<td>"
            toDoTable += first;
            toDoTable += "</td>";

            second = obj[Object.keys(obj)[4]];
            toDoTable += "<td>"
            toDoTable += second;
            toDoTable += "</td>";

            third = obj[Object.keys(obj)[5]];
            toDoTable += "<td>"
            toDoTable += third;
            toDoTable += "</td>";
        }

        toDoTable += "</tr>";
    }

    toDoTable += "</table>";
    console.log(toDoTable);
    toDoLists.appendChild(toDoTable);


테이블 생성 완료!
image


3) todolist 테이블에 추가
toDoLists.appendChild(toDoTable); 이게 안됨


에러
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
appendChild는 node만 추가가 가능한데
만들어진 테이블이 node가 아니라서 추가가 안된다는 것이다..


HTML 노드를 보면
문서 노드(document node)
HTML 문서 전체를 나타내는 노드

요소 노드(element node)
모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드

속성 노드(attribute node)
모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가짐
하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음

텍스트 노드(text node) HTML 문서의 모든 텍스트는 텍스트 노드임
주석 노드(comment node)
HTML 문서의 모든 주석은 주석 노드임

인데 현재 js에서 생성된 table은 html 안에 들어있지 않으니 노드가 아니다!!
그래서 append()를 사용하기로함
노드 깊게 들어갈거 아니고 테이블 하나만 추가되는거니까


결과
image
또 뭔갈 잘못했다
보니까 table 태그가 두번 들어감


코드 수정

    for (var i=0; i<todoCount; i++){
        toDoTable += "<tr>";
        // 테이블엔느 컬러, 콘텐츠, 실행여부 순서대로 td 추가
        for (var obj of todo){
            first = obj[Object.keys(obj)[2]];
            toDoTable += "<td>"
            toDoTable += first;
            toDoTable += "</td>";

            second = obj[Object.keys(obj)[4]];
            toDoTable += "<td>"
            toDoTable += second;
            toDoTable += "</td>";

            third = obj[Object.keys(obj)[5]];
            toDoTable += "<td>"
            toDoTable += third;
            toDoTable += "</td>";
        }
        toDoTable += "</tr>";
        toDoLists.append(toDoTable);
    }

결과
image
뭘 또 잘못한 것인지…


일단 var tableCheck = !!document.getElementById("toDoListsTable");
이부분이 작동을 하지 않는다
이미 toDoListsTable 이 html 안에 존재해도 false 값만 찍는다
도대체 왜..?


    var tableCheck = document.getElementById("toDoListsTable");
    console.log(tableCheck);
    if(tableCheck != null){
        console.log(tableCheck);
        document.getElementById("toDoListsTable").remove();
    }

다르게 해도 table 중 id가 toDoListsTable인 것은 js 딴에서 생성 되는 것이라
걍 인식을 못함
말이 안됨…
애초에 toDoListsTable은 html로 append 되어서
document.getElementById로 잡혀야되는데 잡히지가 않는다


일단 임시방편으로 if 조건을 삭제하고 진행해봤는데
이것도 잘 안된다 뭐 어쩌라는건지