반응형

AJAX에서 return 받은 결과값을

여러 함수에서 이용하려다가

자꾸 값이 똑같아져서...

AJAX 동기화 문제인가.. 함수 순서때문인가.. 어리둥절하다가 알아냄...^.ㅠ


내 문제는 이거였다.. 

array2 값을 c와 d에 따로 담아서 

c의 값을 바꿨는데 d값도 덩달아 바뀐거... 

  let array2=[{"key":"메뉴","value":"짜장"},{"key":"사이드","value":"탕수육"}];
  let c = array2;
  let d = array2;
  c[0].value="짬뽕";
  console.log(d[0].value); //짬뽕 출력

 

심지어 아래와 같은 방식으로 복사를 했는데도 자꾸 값이 바뀌는 것이었다...

for(let i in array2){
    c[i] = array[i];
    d[i] = array[i];
  }

 

 

같은 예라고 할 수 있겠다. 이것이 바로 참조값(주소값)이 복사가 되는 얕은 복사.

  let array=["1","2","3"];
  let a = array;
  let b = array;
  a[0]="text";
  console.log(b[0]); //"text" 출력

a <- array 주소값 

b <- array 주소값 

이렇게 담기면서

a[0]을 변경 -> array[0] 변경 -> b[0] 변경

이렇게 되었던것..


깊은복사 방법

 

1. 반복문으로 때려넣기

반복문으로 값을 하나하나 때려넣어주면 참조값이 아닌 값이 들어가기 때문에

더이상 영향을 받지 않는다. 

 let array3 = ["a","b","c"];
  let e=[];
  let f=[];
  
  for(let i in array3){
    e[i] = array3[i];
    f[i] = array3[i];
  }
  e[0]="eee";
  console.log(f[0]); //"a" 출력

JSON 구조의 배열일 경우 {키:값}을 하나하나 때려넣어 줘야한다 

  let array4=[{"key":"동물","value":"갱쥐"},{"key":"동물","value":"보노보노"}];
  let x = [];
  let y = [];
  for(let i in array4){
    x.push({"key":array4[i].key,"value":array4[i].value});
    y.push({"key":array4[i].key,"value":array4[i].value});
  }

  x[0].value="포로리";
  console.log(y[0].value); //"갱쥐" 출력

 

2. slice

slice 를 이용해도 깊은 복사가 된다. 

slice 는 start 부터 end 까지 대상 배열에서 꺼내와 새로운 배열을 만들어 값을 집어 넣는다. 

start 와 end 가 주어지지 않으면 전체 배열을 복사한다.

  let array5 = ["aa","bb","cc"];
  let v = array5.slice();
  let w = array5.slice();

  v[0]="ddd";
  console.log(w[0]);

 

3. Object.assign

Object.assing()은 뒤의 인자를 앞에 인자에 합쳐 넣는다. 

var o1 = {name:'kim'};  
var o2 = Object.assign({},o1); 
o2.name='kim2'; 

console.log(o1,o2); //{name: "kim"} {name: "kim2"}
반응형
반응형

반복문에 ajax를 넣었는데 ajax가 한 번만 실행되는 것 같다..?

ajax는 비동기라서

for문은 ajax의 호출완료따위 기다려주지 않는다...

async:false를 추가해야함

for (var i = 0; i < AdminArray.length; i++) {
        $.ajax({
          url: "https://testapi/ok",
          type: "PUT",
          data: paramList,
          async: false,
          success: function (response) {
            if (response.result === 1) {
              result *= 1;
            } else {
              result *= 0;
            }
          },
        });
      }
반응형
반응형

두 방법 중 택 1

data가 string 으로 표현된경우

* JSON 파일 내용(myJson.json)

이 방법은 사용해보니 데이터를 한 줄로 적어놔야 했음..

data='[{"data1":"a","data2":"b"},{"data1":"a1","data2":"b2"}]'

 

1. JSON 파일 소스연결 

<script src="../json/myJson.json" type="text/javascript"></script>

 

2. 소스내에서 파싱해서 걍 쓰면 댐~!~! 

let mydata = JSON.parse(data);

반응형

data가 object로 표현된 경우

* JSON 파일 내용(myJson.json)

data=
	[{
    	"data1":"a",
    	"data2":"b"},
        {
        "data1":"a1",
        "data2":"b2"}
     ]

 

1. JSON 파일 소스연결 

<script src="../json/myJson.json" type="text/javascript"></script>

 

2. 파싱할때 stringify 사용

let mydata = JSON.parse(JSON.stringify(data));
console.log(mydata);
반응형
반응형
var toDate = new Date($("#toDate").val());
var fromDate = new Date($("#fromDate").val());
var dateGap = Math.ceil(
      (toDate.getTime() - fromDate.getTime()) / (1000 * 3600 * 24)
    );

ex)

fromDate : 2021-04-30

toDate : 2021-05-01

dateGap : 1 

 

반응형
반응형

없는 데이터(undefined인 데이터에) 배열로 접근하려고 해서 발생.

데이터는 JSON 데이터로 다음과 같다

data='[{"date":"20210514","avg":{"data1":"a","data2":"b","data2":"c"},
	"min":{"data1":"a","data2":"b","data2":"c"},
	"max":{"data1":"a","data2":"b","data2":"c"}}]'

 

배열로 만들어놓고 반복문으로 접근해서 처리하려 했는데.. 

TypeError: Cannot read property '0' of undefined 에러가 나면서 안 됨 

var arr = ["avg","min","max"];
var arr2 = ["data1","data2","data3","data4"];

for(var i=0; i<data.length; i++){
	for(var x=0; x<arr.length; x++){
    	for(var y=0; y<arr.length; y++){
        	if(data[i].arr[x].arr2[y]==null){
            	data[i].arr[x].arr2[y]="-";
            }
        }
    }
}

임의로 배열을 만들어서 index로 접근하면 안되나보다

구래서 다 뺐더니 됨 

for(var i=0; i<data.length; i++){
	if(data[i].avg.data1==null){
		data[i].avg.data1="-";
	}
}
반응형
반응형
//클릭 이벤트 연결
$(".Check").click(function () {
 	//방금 클릭한 dom의 id값 가져오기
	let checkedId = $(this).attr("id");
	//방금 클릭한 dom의 name값 가져오기
	let checkedName = $(this).attr("name");
	//방금 클릭한 dom의 class값 가져오기
	let checkedClass = $(this).attr("class"); 
    
	//id로 요소 선택하여 check여부 컨트롤
	document.getElementById(checkedId).checked=true;
	//class 이름으로 요소(들) 선택하여 check여부 컨트롤
	document.getElementsByClassName(checkedClass).checked=false;
	//Name으로 요소(들) 선택하여 check여부 컨트롤
	document.getElementsByName(checkedName).checked=false;
});

 

체크한 checkbox object 찾기 

 //class 명으로 dom 선택(checkbox들임)
 let obj = document.getElementsByClassName("optionCheck");
 
 //loop돌며 checked여부 검사
 for (var i = 0; i < obj.length; i++) {
      if (obj[i].checked == true) {
      //체크되었으면 체크 해제 
        obj[i].checked=false;
      }
  }
반응형
반응형

document.ready로 기존 DOM로딩 후 change 이벤트 걸기

$(document).ready(function () {
	$("#type").change(function () {
 		alert("test")
	});
});

 

동적으로 생성된 DOM에 change 이벤트 걸기

$(document).on('change','#type',function(){
	alert("test");
});

 

반응형
반응형

juery 필요. head에 jquery cdn 추가

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 한 페이지에 나타낼 글 수 선택 HTML

<select id="dataPerPage">
        <option value="10">10개씩보기</option>
        <option value="15">15개씩보기</option>
        <option value="20">20개씩보기</option>
</select>

 

2. 페이징 표시할 부분 HTML

<ul id="pagingul">
</ul>

 

3. 데이터 표시할 테이블 HTML

<span id="displayCount"></span>
<table id="dataTableBody">
</table>

 


4. 페이징 처리 준비를 위한 JavaScript

let totalData; //총 데이터 수
let dataPerPage; //한 페이지에 나타낼 글 수
let pageCount = 10; //페이징에 나타낼 페이지 수
let globalCurrentPage=1; //현재 페이지
let dataList; //표시하려하는 데이터 리스트

$(document).ready(function () {
 //dataPerPage 선택값 가져오기
 dataPerPage = $("#dataPerPage").val();
 
 $.ajax({ // ajax로 데이터 가져오기
	method: "GET",
	url: "https://url/data?" + data,
	dataType: "json",
	success: function (d) {
	   //totalData(총 데이터 수) 구하기
	   totalData = d.data.length;
           //데이터 대입
           dataList=d.data;
 });
 
 //글 목록 표시 호출 (테이블 생성)
 displayData(1, dataPerPage);
 
 //페이징 표시 호출
 paging(totalData, dataPerPage, pageCount, 1);
});

 

 

5. 글 목록 표시 함수

//현재 페이지(currentPage)와 페이지당 글 개수(dataPerPage) 반영
function displayData(currentPage, dataPerPage) {

  let chartHtml = "";

//Number로 변환하지 않으면 아래에서 +를 할 경우 스트링 결합이 되어버림.. 
  currentPage = Number(currentPage);
  dataPerPage = Number(dataPerPage);
  
  for (
    var i = (currentPage - 1) * dataPerPage;
    i < (currentPage - 1) * dataPerPage + dataPerPage;
    i++
  ) {
    chartHtml +=
      "<tr><td>" +
      dataList[i].d1 +
      "</td><td>" +
      dataList[i].d2 +
      "</td><td>" +
      dataList[i].d3 +
      "</td></tr>";
  } //dataList는 임의의 데이터임.. 각 소스에 맞게 변수를 넣어주면 됨...
  $("#dataTableBody").html(chartHtml);
}

 

 

반응형

 

6. 페이징 표시 함수 

function paging(totalData, dataPerPage, pageCount, currentPage) {
  console.log("currentPage : " + currentPage);

  totalPage = Math.ceil(totalData / dataPerPage); //총 페이지 수
  
  if(totalPage<pageCount){
    pageCount=totalPage;
  }
  
  let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹
  let last = pageGroup * pageCount; //화면에 보여질 마지막 페이지 번호
  
  if (last > totalPage) {
    last = totalPage;
  }

  let first = last - (pageCount - 1); //화면에 보여질 첫번째 페이지 번호
  let next = last + 1;
  let prev = first - 1;

  let pageHtml = "";

  if (prev > 0) {
    pageHtml += "<li><a href='#' id='prev'> 이전 </a></li>";
  }

 //페이징 번호 표시 
  for (var i = first; i <= last; i++) {
    if (currentPage == i) {
      pageHtml +=
        "<li class='on'><a href='#' id='" + i + "'>" + i + "</a></li>";
    } else {
      pageHtml += "<li><a href='#' id='" + i + "'>" + i + "</a></li>";
    }
  }

  if (last < totalPage) {
    pageHtml += "<li><a href='#' id='next'> 다음 </a></li>";
  }

  $("#pagingul").html(pageHtml);
  let displayCount = "";
  displayCount = "현재 1 - " + totalPage + " 페이지 / " + totalData + "건";
  $("#displayCount").text(displayCount);


  //페이징 번호 클릭 이벤트 
  $("#pagingul li a").click(function () {
    let $id = $(this).attr("id");
    selectedPage = $(this).text();

    if ($id == "next") selectedPage = next;
    if ($id == "prev") selectedPage = prev;
    
    //전역변수에 선택한 페이지 번호를 담는다...
    globalCurrentPage = selectedPage;
    //페이징 표시 재호출
    paging(totalData, dataPerPage, pageCount, selectedPage);
    //글 목록 표시 재호출
    displayData(selectedPage, dataPerPage);
  });
}

 

 

7. 페이지 번호 클릭시

$("#dataPerPage").change(function () {
    dataPerPage = $("#dataPerPage").val();
    //전역 변수에 담긴 globalCurrent 값을 이용하여 페이지 이동없이 글 표시개수 변경 
    paging(totalData, dataPerPage, pageCount, globalCurrentPage);
    displayData(globalCurrentPage, dataPerPage);
 });

페이징 부분 CSS

ul {
    text-align: center;
    display: inline-block;
    border: 1px solid #ccc;
    border-right: 0;
	padding-left :0;
}
ul li {
    text-align: center;
    float: left;
	list-style:none;

}

ul li a {
    display: block;
    font-size: 14px;
	color: black;
    padding: 9px 12px;
    border-right: solid 1px #ccc;
    box-sizing: border-box;
	text-decoration-line:none;
}

ul li.on {
    background: #eda712;
}

ul li.on a {
    color: #fff;
}

 


관련글) JAVA Controller에서 모듈을 이용한 클라이언트 페이징처리

https://mchch.tistory.com/305

 

[JAVA][Spring MVC][JSP] 페이지네이션 / 페이징처리 / 게시판 페이지 표시 / PageNavigator / page 모듈

* d2work.lib.util 모듈을 사용하였음. 아래에 util 소스를 적어놨음. 1. Controller import d2jwork.lib.util.PageNavigator; //PageNavigator를 import 해준다. @RequestMapping public ModelAndView myMethod1(HttpServletRequest request, HttpServ

mchch.tistory.com

 

반응형
반응형

1. 다운로드 버튼 클릭 이벤트 

$("#excelDownload").click(function () {
    let filename = "testFile.csv";
    getCSV(filename);
  });

 

2. CSV 생성 함수 

function getCSV(filename) {
  var csv = [];
  var row = [];
  
  //1열에는 컬럼명
  row.push(
    "열 제목1",
    "열 제목2",
    "열 제목3",
  );
  
  csv.push(row.join(","));

//chartDataList는 데이터 배열
    $.each(chartDataList, function (index, data) {
    row = [];
    row.push(
      data.d1,
      data.d2,
      data.d3
    );
    csv.push(row.join(","));
  });

  downloadCSV(csv.join("\n"), filename);
  
  }

3. CSV 다운로드 함수

function downloadCSV(csv, filename) {
  var csvFile;
  var downloadLink;

  //한글 처리를 해주기 위해 BOM 추가하기
  const BOM = "\uFEFF";
  csv = BOM + csv;

  csvFile = new Blob([csv], { type: "text/csv" });
  downloadLink = document.createElement("a");
  downloadLink.download = filename;
  downloadLink.href = window.URL.createObjectURL(csvFile);
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click();
}
반응형
반응형
var test=""; if(test >=0) console.log("ok"); console.log(Number(test));
// 결과값 : ok 0

var test=null; if(test >=0) console.log("ok"); console.log(Number(test));
// 결과값 : ok 0

var test ="a"; console.log(Number(test));
//결과값 : NaN

 

 

변수값이 null 이거나 "" 인데 

0하고 비교 연산을 하면 

0처럼 취급되는 것..... 왜그런지 생각해보니..

 

연산자 사용시 null은 아스키코드값이 0인것..

Number로 치환해봐도 0인것... 

주의해야겠음..

 

** 자바는 정수 연산일 경우 int타입을 기본으로 한다.

크기가 4byte보다 작은 타입(byte,char,short)은 int로 변환된 후 연산이 수행된다.

따라서 연산의 결과도 int 타입이 된다.

** 서로 다른 타입의 피연산자가 있을 경우느 두 피연산자 중 크기가 큰 타입으로 자동변환된 후 연산을 수행한다.

 

반응형

+ Recent posts