[JS] 외부 HTML파일 읽어와 JSON데이터 만들기

var x = new XMLHttpRequest();
x.open("GET","https://consolekakao.github.io/");
x.send();

function test(){

    if(x.readyState == '4'){
    console.log('complete road');

    let i;
    var el = document.createElement('yoso')
    el.innerHTML = x.responseText;
    clearInterval(timer);

    let jlist = new Array();
    for(i=0;i<el.querySelectorAll('.card-title').length;i++) {
        var jdata = new Object();
        jdata.number = i;
        jdata.value = el.querySelectorAll('.card-title')[i].innerText;
        jlist.push(jdata);
    }
        var view = JSON.stringify(jlist);
        document.write(view);

}
else{
    console.log('loading');

}
}
let timer = setInterval(test,100);

출력값:

[{"number":0,"value":"JAVASCRIPT: 외부 HTML파일 읽어와 파싱 (실습)"},{"number":1,"value":"JAVASCRIPT: Fetch란 무엇인가."},{"number":2,"value":"JAVASCRIPT: 동기(Synchronous) & 비동기(Asynchronous)"},{"number":3,"value":"JAVASCRIPT: XMLHttpRequest ReadyState를 활용한 HTML ROAD"},{"number":4,"value":"JAVASCRIPT: CORS-Policy 관련 에러 발생이유"},{"number":5,"value":"JAVASCRIPT: Async & await"},{"number":6,"value":"JAVASCRIPT: querySelector"},{"number":7,"value":"JAVASCRIPT: getElementByID"}]

이전 포스팅에서와같이 약간 응용해서 이걸 JSON데이터 타입으로 만드는 예제다.

단지 jlist의 배열을 만들고 그안에 Object를 Push하는과정이다.

JSON.stringify 메소드를 이용하면 json객체를 string형식으로 캐스팅 가능하다.