2차배열 응용
배열의 데이터 리스트로 HTML에 출력 (역순)
리스트 전체보기
리스트 내용 검색
data.js
var news = [
["뉴스제목1","프레시안","2025-01-14"],
["뉴스제목2","연합뉴스","2025-01-16"],
["뉴스제목3","프레시안","2025-01-17"],
["뉴스제목4","서울신문","2025-01-20"],
["뉴스제목5","YTN","2025-01-22"]
]re8.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열로 값을 출력 - 2차 배열(원시배열[], 키배열{})</title>
</head>
<body>
<ul id="news_notice">
</ul>
<br><br>
언론사 검색 : <input type="text" id="corp">
<input type="button" value="검색" onclick="search_news()">
<input type="button" value="전체" onclick="all_news()">
</body>
<!-- data.js는 배열 데이터가 있는 파일 -->
<script src="./data.js?v=1"></script> <!-- 데이터 로드 먼저!! -->
<!-- 해당 배열로 데이터를 출력하는 코드 파일 -->
<script src="./re8.js?v=6"></script>
</html>re8.js
var search_word = ""; //검색단어 전역변수
var all_view = "Y"; //전체 리스트 핸들링
var all_news = function(){
this.all_view = "Y";
news_datalist();
}
var search_news = function() {
this.all_view = "N";
this.search_word = document.getElementById("corp").value; //전역변수 검색어 setter
news_datalist(); //함수 재실행
}
var news_datalist = function() {
//console.log(this.all_view);
var news_notice = document.getElementById("news_notice");
var html = "";
var i = news.length - 1;
var ii = 0;
//배열 역순에서 중요한거 시작은 개수-1 종료는 0!!!!!!!!
while (i >= 0) {
if (this.search_word == news[i][1] && this.all_view =="N") {
ii = 0;
html += "<li>";
while (ii < news[0].length) {
//console.log(news[i][ii]);
html += news[i][ii] + " ";
ii++;
}
html += "</li>";
}else if(this.all_view =="Y"){
ii = 0;
html += "<li>";
while (ii < news[0].length) {
//console.log(news[i][ii]);
html += news[i][ii] + " ";
ii++;
}
html += "</li>";
}
i--;
}
news_notice.innerHTML = html;
}
news_datalist(); //함수 강제 실행- innerHTML : HTML태그를 사용가능 (
- 단점 : 신규데이터 입력시 기존데이터 삭제됨 => 누적시키는 변수 필요
- append, insertBefore : Node형태이며 순차적으로 데이터 적용가능
- 단점 : 태그 작동 안됨 문자로 출력
- 배열 역순으로 출력시 주의점
- 시작 : length - 1
- 종료 : 0 //반복문에 사용시 0을 포함하도록!!
