[자바스크립트]JSON 합치기 (Merge)

다음과 같은 JSON이 있을때 같이 key값 끼리 array로 합치는 방법

[{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "array_key": ["array1", "array2", "array3"]
}, {
    "key1": "value1_1",
    "key2": "value2_1",
    "key3": "value3_1",
    "array_key": ["array1_1", "array2_1", "array3_1", "array4"]

}, {
    "key1": "value1_last",
    "key2": "value2_last",
    "key3": "value3_last",
    "array_key": ["array1_last"]

}]

javascript의 concat과 reduce 함수를 사용하면 된다.

array.reduce(callback, [,initialvalue])

array.concat([item1,[item2...[itemN]]])

var data = [{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "array_key": ["array1", "array2", "array3"]
}, {
    "key1": "value1_1",
    "key2": "value2_1",
    "key3": "value3_1",
    "array_key": ["array1_1", "array2_1", "array3_1", "array4"]

}, {
    "key1": "value1_last",
    "key2": "value2_last",
    "key3": "value3_last",
    "array_key": ["array1_last"]

}];

var result = data.reduce(function(r, e) {
  return Object.keys(e).forEach(function(k) {
    if(!r[k]) r[k] = [].concat(e[k])
    else r[k] = r[k].concat(e[k])
  }), r
}, {});

console.log(result);

그럼 다음과 같은 결과를 얻을 수 있다.

[{
	"key1" : ["value1", "value1_1", "value1_last"],
	"key2" : ["value2", "value2_1", "value2_last"],
	"key3" : ["value3", "value3_1", "value3_last"],
	"array_key" : ["array1", "array2", "array3", "array1_1", "array2_1", "array3_1", "array4", "array1_last"]
}]

예제를 직접 실행하면 다음과 같이 볼 수 있다.

[Javascript]문자열에서 문자 찾는 몇가지 방법

문자를 찾는 방법 몇가지

1. indexOf

var stringVal = "javascript",
    substring = "java";
stringVal.indexOf(substring) !== -1;

javascript의 기본객체인 string의 indexOf를 이용하는 방법

포함하고 있는 문자의 인덱스를 반환한다.

만약 문자를 가지고 있지 않으면 -1을 반환한다.

2. includes(ES6이상 에서 적용 가능)

var stringVal = "javascript",
    substring = "java";
stringVal.includes(substring);

ES6에서 포함된 string의 includes 함수를 이용하는 방법

포함하고 있는 문자가 있으면 true, 없으면 false를 반환한다.

자세한 사항은 모질라페이지에서 

3. search

var stringVal = "Hello World",
    exp = /java/;
string.search(exp);

search함수를 사용하는 방법

포함하는 문자가 있으면 인덱스를 리턴한다.

만약 문자가 포함되어 있지 않으면 -1을 반환한다.

4. lodash 의 includes

var stringVal = "Hello World",
    substring = "Hell";
_.includes(stringVal , substring);

lodash 사용법은 홈페이지를 참조한다.

5. 정규식

var stringVal = "Hello world",
    exp = /hell/; 
exp.test(stringVal );

6. match

var stringVal = "super mario",
    exp = /mario/;
stringVal.match(exp);

찾는 문자열을 배열로 반환한다. 

실제 예제는 아래에서

JSfiddle 예제

Result탭을 누르면 결과를 확인 할 수 있습니다.

[자바스크립트] redirect 하는 방법

location.href 사용법

사용자가 클릭을 통해 페이지가 이동하면 location.href=""을 사용한다.

HTTP Redirect를 하고 싶으면 location.replace("")를 사용한다.

다음은 사용 예제

//HTTP Redirect를 클라이언트에서 처리할때
window.location.replace("http://example.com");

//사용자의 클릭 이벤트용
window.location.href = "http://example.com";

제이쿼리를 이용하는 방법

//attr속성을 사용한다.
$(location).attr('href', 'http://example.com');

이 방법은 사용가능 하지만 추천하지는 않는다.

이 외의 방법으로 페이지를 이동시키는 방법

//assign 복사함수로도 구현 가능
window.location.assign('http://www.example.com');

//window뿐 아니라 document로도 가능
document.location.href = '/path';

//구형 익스플로어에서는 다음방법도 가능했다.
window.navigate('http://example.com');

//히스토리를 이용하여 이동하는 방법
window.history.back();
window.history.go(-1);

//
self.location = 'http://www.example.com';

이렇게 많은 방법의 페이지 이동방법이 있지만 가장 위에 있는 방법을 추천한다.

jQeury AJAX 예제

jQuery.ajax(url, [setting]) 또는 jQeury.ajax([setting])으로 사용합니다.

HTTP 리퀘스트에 대해 비동기 동작을 합니다.

속성값으로는 다음이 사용됩니다.

속성값은 더 많이 있지만 자주 사용하는 속성들은 이 정도에서 크게 벗어나지 않습니다.

기본 예제코드

$.ajax({
  url: "/json/people",
  data : {"id" : "admin"},
  beforeSend: function( xhr ) {
    console.log('리퀘스트 보내기 전에 데이터 조작가능');
  },success: function(d){
    console.log('서버에서 받은 데이터 = ' + d);
  }, error : function(e){
    console.error('에러발생');
  }
})

ajax를 통해 DOM을 추가하는 예제

$.ajax({
  url: "test.html",
  cache: false
}).done(function( html ) {
    $( "#results" ).append( html );
  });
});

위의 예제는 test.html이 동적으로 작동한다는 가정을 하고 cache를 false로 하고 사용하였습니다.

브라우저의 cache내용을 받지 않고 서버에서 새로 받아오겠다고 이해하면 됩니다.

그리고 ajax가 종료되면 done함수의 results 엘리먼트에 서버에서 받아온 HTML을 엘리먼트 뒤에 추가(append) 하게 됩니다.

자바스크립트를 이용하여 체크박스 상태 가져오기

예제1 : pure javascript로 값 가져오기

var checked = document.getElementById("checkinfo1").checked;

위와 같이 작성하면 boolean형태의 값(true, false)을 반환 합니다.

제이쿼리로 작성하면 다음과 같습니다.

예제2: 제이쿼리(jQuery)로 값 가져오기

$('#checkinfo1').attr('checked'); // checked, null
//또는
$('#checkinfo1').prop('checked'); //true, false
//또는
$('#checkinfo1').is(':checked'); // true, false

위와 같이 여러가지 형태로 값을 가지고 올 수 있습니다.

예제3 : 제이쿼리(jQuery)를 이용하여 해당 엘리먼트(element) 조작하기

$('input:checked').each(function(i, el){
    console.log($(this).attr('id');
});

위와 같은 방법을 통해서  element 배열을 받아서 반복문을 사용할 수 있습니다.

반복문을 통해 직접 해당 element의 속성 등도 조작이 가능합니다.

예제4 : 전체 선택, 전체 해제

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', true);
  });
});

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', false);
  });
});

다음과 같은 체크박스예제를 활용하여 메일박스에 있는 check박스의 전체 선택/해제 등을 구현 할 수 있다.

스프링 프레임워크를 사용하다가 가끔은 AJAX 없이 첫페이지에서 데이터를 JSON으로 JSP에 넘겨주고 싶을때

서버에서 넘겨주는 ModelMap을 JSP페이지에서 어떻게 받을지에 대한 글 입니다.

ModelMap.addAttribute("result", result);

보통 이렇게 JAVA파일에 작성하여 JSP의 JSTL을 사용합니다.

그런데 가끔 자바스크립트의 데이터로 사용할 일이 생깁니다. 그럴땐 다음과 같은 방법으로 JSON을 생성합니다.

자바파일에서 

JACKSON을 이용하는 방법

String json = new ObjectMapper().writeValueAsString(JsonVO);
ModelMap.addAttribute("result", json );

또는

Gson을 사용하는 방법

Map<String, String> jsonMap = new HashMap<String, String>();
jsonMap.put("one", "hello");
jsonMap.put("two", "world");

Gson gson = new GsonBuilder().create();
String json = gson.toJson(jsonMap);
ModelMap.addAttribute("result", json );

이런 방식으로 JSP단으로 JSON을 넘겨주고 JSON을 스크립트에서 받을때는 

<script>
var jsonData = ${result};
</script>

이렇게 저장 합니다.

여기서 중요한건 데이터에 따움표가 없다는 것입니다.

그래야 javascript의 eval메소드 없이 값을 할당 할 수 있습니다.

{
    "one" : "hello",
    "two" : "world"
}

jsonData 변수에 위의 JSON이 할당 됩니다.

가끔 쓰는 방법이니 기억해 두고 있으면 편리 합니다.

랜덤함수를 이용하여 자바스크립트로 guid 생성하기.

DOM에 버튼을 하나 만들고

<button id="makeGUID">GUID만들기</button>
<input id="Result" readonly />

자바스크립트 코드를 추가 합니다.

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

document.getElementById("makeGUID").addEventListener('click', function() {
  document.getElementById('Result').value = guid();
})

* syntaxhilight : higlight.js

위와 같이 코드를 만들고 버튼을 클릭하면

"a101b4ce-04f4-3e30-fcca-7d06145e2276"

이런 난수들이 발생합니다.

다음은 실행 예제