Object 를 저장후 json 으로 가져오기.

내가 요번 프로젝트에서 사용한 데이터 흐름이다.

나중에 참고하도록하자.

 

* 상황

ui 에서는 각 필드에서 option 값을 저장하여야하고

그 값을 한대로 묶어서 데이터화 시켜야한다.

그후 그값을 다른서버로 보내야 한다.

 

일단 Object()로 각 값을 저장 시켰다.

var template = new Object();

option 값에 아이디값을 가져온후

var value_str4 = document.getElementById('select_value1080p');
var value_str3 = document.getElementById('select_value720p');
var value_str2 = document.getElementById('select_value480p');
var value_str = document.getElementById('select_value360p');

체크된 값들을 가져와서 object 로 만든다.

if (document.getElementById('bitrate1080p').checked) {
        template.p1080 = value_str4.options[value_str4.selectedIndex].text;
    }
    else  {
        nullcheckArr.push('unchecked1080p');
    }
    if (document.getElementById('bitrate720p').checked) {
        template.p720 = value_str3.options[value_str3.selectedIndex].text;
    }
    else  {
        nullcheckArr.push('unchecked720p');
    }
    if (document.getElementById('bitrate480p').checked) {
        template.p480 = value_str2.options[value_str3.selectedIndex].text;
    }
    else  {
        nullcheckArr.push('unchecked480p');
    }
    if (document.getElementById('bitrate360p').checked) {
        template.p360 = value_str.options[value_str.selectedIndex].text;
    }
    else  {
        nullcheckArr.push('unchecked360p');
    }

    console.log(template)

output :  {"p1080":"2","p720":"0.5","p480":"0.3"}

 

저 output 을 저장한후. 다시 꺼내오는것을 보자.

 

$employee = DB::table('vcms_encoding_template')
        ->where('account_id', 11)
        ->get();

        return json_encode($employee);

 

값을 최초로 가져왔을떄 string 값으로 들어올것이다.

그럼 json_encode 로 json 형식으로 만들어준다.

 

$.ajax({
    url: "showtemplate",
    type:"POST",
    dataType: "json",
    data:{
        '_token': '{{csrf_token()}}',
        order : inputValue,
        },
        success:function(res){
            //console.log(res);
            
            $.each(res,function(index,value){
                console.log(JSON.parse(value.encoding_element));
                var a = ' ● 1080p: '+a['p1080']+' Mbps'+' ● 720p: '+a['p720']+'Mbps'+' ● 480p: '+a['p480']+'Mbps'+' ● 360p: '+a['p360']+'Mbps';
                console.log(a);
            });
            
        }
});

 

그리고 each 문으로 value를 돌려가면서 값을 확인해보자.