PHP 에서 배열 데이터를 json_encode 로 생각없이 넘겨주면 jQuery JSON 에서 처리를 쉽게 해결될 줄 알고 구글링하면서 이것 저것 찾아서 해결하면 금방 잊어버리고 그랬다.
분명히 예전에 했던 것인데 다시 할려고 하니까 시간을 또 허비하고 있다.
뭔가 대충해서 문제가 있는 거 같아서 집중적으로 테스트를 해봤다.
먼저 PHP에서 넘겨주는 데이터 파일을 보자.
<?php
require_once 'path.php';
require_once $g['path_center'].'config/config.php';
require_once $g['path_class'].'connect.php';
require_once $g['path_class'].'dbDataClass.php';
$c = new DBDataClass;
$sql ="select idx,userNM,telNO,mobileNO,codeID FROM member ";
$sql.="where userID='".$_REQUEST['userID']."'";
$result = mysqli_query($db,$sql);
$R = array();
if($row = mysqli_fetch_assoc($result)):
array_push($R,$row);
endif;
//echo '<pre>';print_r($R);echo '</pre>';
echo json_encode($R);
//echo json_encode(array('rs' => $R));
?> |
보다시피 배열로 만들어진 결과를 json_encode 한 다음에 echo 문으로 출력을 한 것이다.
이제 클라이언트 JSON 처리 파일을 살펴보자.
결과 그림부터 보고 아래 코드를 살펴보면 뭐가 다른지 보인다.
문자열은 중괄호({})로 둘러쌓여 있는데, PHP에서 넘겨온 데이터는 대괄호([])가 있고 중괄호({})가 있는 형태다.
이렇게 데이터 형태가 다른데 이걸 JSON.parse 만 하면 원하는 object 로 되는 줄 알고 처리를 시도했더니 결과가 나오지 않았던 것이다.
이걸 stringify 하여 문자열로 변환한 다음에 split 으로 대괄호 부분을 제거하고 다시 JSON.parse 를 하면 원하는 결과가 나온다.
var obj = JSON.stringify(msg); // 문자열로 변경된다.
var objsplit1 = obj.split(']');
var objsplit2 = objsplit1[0].split('[');
var rs = JSON.parse(objsplit2[1]);
console.log('idx = '+rs.idx);
이렇게 처리하거나 배열로 뽑아내서 원하는 결과를 얻어서 처리하는 방법이 최선이다.
var arr= new Array();
$.each(msg, function(key, obj){
$.each(obj,function(k,value){
arr.push(value)
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>JSON Object, String</h2>
<p id="txt"></p>
<p id="obj_parse"></p>
<p id="obj"></p>
<p id="post_msg"></p>
<p id="ajax_msg"></p>
<p id="json2string"></p>
<p id="stringify"></p>
<script>
var txt = '{"name":"홍길동", "age":30, "city":"서울"}';
$('#txt').html('문자열 : '+txt);
var obj = JSON.parse(txt);
$("#obj_parse").html(obj.name + ", " + obj.age);
document.getElementById("obj").innerHTML = obj;
// $("#obj").html(obj); // 출력 결과물이 화면에 표시하지 못한다.
$.post('json.php',{userID:72771381},function(msg){
console.log(msg); // 결과가 문자열로 넘어온다.
//document.getElementById("post_msg").innerHTML = msg;
$('#post_msg').html(msg);
});
$.ajax({
url: "json.php",
type: "POST",
data: {userID:72771381},
dataType: "JSON",
success: function (msg) {
console.log(msg);
document.getElementById("ajax_msg").innerHTML = msg;
var obj = JSON.stringify(msg); // 문자열로 변경된다.
$('#json2string').html(obj);
var objsplit1 = obj.split(']');
var objsplit2 = objsplit1[0].split('[');
console.log(objsplit2[1]);
var rs = JSON.parse(objsplit2[1]);
console.log('idx = '+rs.idx);
var arr= new Array();
$.each(msg, function(key, obj){
$.each(obj,function(k,value){
arr.push(value)
});
});
console.log(arr);
}
});
var myObject = new Object();
myObject.name = "왈패";
myObject.age = 12;
myObject.pets = ["cat", "dog"];
var myString = JSON.stringify(myObject);
$("#stringify").html(myString);
</script>
</body>
</html> |
마지막 myObject 를 JSON.stringify 를 하면 맨 처음과 똑같은 형태의 중괄호({})로 둘러쌓인 문자열이 만들어진다는 걸 확인할 수 있다.
결론 PHP 에서 넘어온 JSON 형태는 jQuery 가 처리하려는 형태와 약간 다르므로 이걸 고려해서 파싱처리해야 한다는 것이다.
