[jQuery] Converting JSON Object into Javascript array

Web 프로그램/js, jQuery 2016. 12. 31. 13:05

728x90

Array 변수 처리에 대한 이해가 부족하여 기능 구현보다 변환하는데 시간이 휠씬 더 걸리고 있다.

다 기초가 부족한 탓이다. 테스트한 결과를 무조건 기록해둔다.

PHP 함수에서 return json_encode($R); 배열로 반환 결과가

{"1":"36","2":"23","3":"14","4":"7","5":"12","6":"6","7":"5","8":"9","9":"17","10":"7"}

일 경우

자바스크립트에서 배열 변수로 받기 위해서는

var obj1 = JSON.parse('<?php echo $line1; ?>');

var line1 = new Array();

for(var i in obj1){

line1.push(obj1[i]);

}

로 하면 값만 추출된 배열변수가 만들어진다.

또다른 방법으로 테스트를 했다.

var obj1 = <?php echo $line1; ?>;

var line1 = $.map(obj1, function(el) { return el });

로 해도 동일한 결과가 나온다.

배열 변환 결과가

[0,1,2,3,4,5,6,7,8,9,10]

로 화면 출력될 경우에는

var ticks = JSON.parse('<?php echo json_encode($ticks); ?>');

또는

var ticks = <?php echo '["' . implode('","', $ticks) . '"]' ?>;

둘 중에 하나를 사용하면 배열 변수가 된다.

PHP 배열로 반환된 결과를

<?php

$Line2 = array();
foreach($line2 as $key => $value){
array_push($Line2,$value);
}

로 값만 다시 배열로 만든다음에

var line2 = <?php echo '["' . implode('","', $Line2) . '"]' ?>;

로 자바스크립트 배열 변수를 만들 수 있다.

테스트한 파일을 그대로 적어둔다.

<?php
require_once 'connect.php'; // db접속 성공
require_once 'statsClass.php'; // 통계 클래스
$b = new statsClass();
$R = $b->extract_YM();
date_default_timezone_set('Asia/Seoul');
if(isset($_GET['ym'])){
    $ym = $_GET['ym'];
} else {
    $ym = date("Ym");
}
$ticks = $b->maxdate_YM($ym);
$line1 = $b->dailyCnt_value($ym);
$line2 = $b->userCnt_value($ym);
//echo $line1.'<br />';
//echo json_encode($line2).'<br />';
//echo json_encode($ticks).'<br />';
$Line2 = array();
foreach($line2 as $key => $value){
    array_push($Line2,$value);
}
?>
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript" src="../js/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="../js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jqplot/jquery.jqplot.css" />
<script type="text/javascript">
$(document).ready(function(){
    var plot1;
    /*
    var obj1 = JSON.parse('<?php echo $line1; ?>');
    var line1 = new Array();
    for(var i in obj1){
        line1.push(obj1[i]);
    }
    */
    var obj1 = <?php echo $line1; ?>;
    var line1 = $.map(obj1, function(el) { return el });

    //var obj2 = JSON.parse('<?php echo json_encode($line2); ?>');
    /*
    var line2 = new Array();
    for(var i in obj2){
        line2.push(obj2[i]);
    }
    */
    var line2 = <?php echo '["' . implode('","', $Line2) . '"]' ?>;

    //var ticks = JSON.parse('<?php echo json_encode($ticks); ?>');
    var ticks = <?php echo '["' . implode('","', $ticks) . '"]' ?>;

    renderChart(line1,line2,ticks);

    $('#selectmonth').on('change',function(){
        if(this.value !== ""){
            var optVal=$(this).find(":selected").val();
            var pageURL = "<?php echo $_SERVER['PHP_SELF'];?>?ym=" + optVal;
            $(location).attr('href', pageURL);
        }
    });

});

function renderChart(line1,line2,xAxis){
    plot1 = $.jqplot('chartDiv', [line1,line2], CreateBarChartOptions(xAxis));
}

function updatePlot(line1,line2,xAxis){
    plot1.destroy();
    plot1 = $.jqplot('chartDiv', [line1,line2], CreateBarChartOptions(xAxis));
}

function CreateBarChartOptions(xAxis) {
    var optionsObj = {
        title: '일자별 접속 통계',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer, // 막대 그래프
            rendererOptions: { barWidth: 10 }, // bar의 너비 수동으로 설정
            pointLabels: { show: true } // 레이블 값
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: xAxis,
                tickOptions: {
                    formatString: '%d' // 정수형으로 표시
                }
                //label:'일자'
            },
            yaxis:{
                //renderer:$.jqplot.DateAxisRenderer,
                min:0,
                //max:80
            }
        },
        highlighter: { show: false }
    };
    return optionsObj;
}
</script>

</head>
<body>
<div id="chartDiv" style="height:400px;width:1500px; "></div>
<div style="height:300px;width:1490px;margin-top:10px;text-align:right;">
<select name="month" id="selectmonth">
<option value="">년월 선택</option>
<?php
    while ($row = mysql_fetch_array($R)){
        echo "<option value='".$row[0]."' ";
        if($row[0] === $ym) echo "selected='selected'";
        echo ">".$row[0]."</option>\n";
    }
?>
</select>
</div>
</body>
</html>

728x90

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

[Javascript] window open 및 div popup 처리 방법 (0)	2017.01.04
[jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 실제 연동) (0)	2016.12.31
[jQuery] How to enable or disable my Internet browser's Autocomplete (0)	2016.12.31
[jQuery] 자기자신 파일 갱신 처리할 때 (0)	2016.12.31
[jQuery] Autocomplete using PHP/MySQL and jQuery (0)	2016.12.21

Link2Me