pat_json.txt 파일을 이용한 pat 정보 webbrowser로 출력

Program Lang./javascript 2016. 7. 21. 19:27

MPEG-TS Analyzer들 처럼 treeview로 보여주고 싶어서 인터넷을 뒤지다. 좋은 참고 사이트가 있어서 활용하였다.

상세 정보는 아래 참고 사이트 블로그 참조.

1. 소스 트리

아래 위치는 apache2 root directory인 /Users/hskim/Sites/mpeg/ 아래 소스 트리이다.

pat_json.txt 파일은 c++ native application이 pat을 parsing한 후에 만들어서 저장한 json 파일이다.

이 파일을 웹브라우져에서 읽어본다.

├── css

│ ├── images

│ │ ├── ajax-loader.gif

│ │ ├── file.gif

│ │ ├── folder-closed.gif

│ │ ├── folder.gif

│ │ ├── minus.gif

│ │ ├── plus.gif

│ │ ├── treeview-black-line.gif

│ │ ├── treeview-black.gif

│ │ ├── treeview-default-line.gif

│ │ ├── treeview-default.gif

│ │ ├── treeview-famfamfam-line.gif

│ │ ├── treeview-famfamfam.gif

│ │ ├── treeview-gray-line.gif

│ │ ├── treeview-gray.gif

│ │ ├── treeview-red-line.gif

│ │ └── treeview-red.gif

│ ├── jquery.treeview.css

│ └── screen.css

├── index.html

├── lib

│ ├── jquery.cookie.js

│ ├── jquery.js

│ └── jquery.treeview.js

└── pat_json.txt

2. 선수 작업

일단 json 파일을 javascript에서 읽어 드리면 방법은 여러가지가 있지만 javascript공부가 주 목적이 아니므로로

일단 돌아가면 그냥 냅둔다.

treeview.html 파일을 index.html로 바꾸고 거기에 json http parsing 부분만 추가하였다.

3. index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>jQuery treeview</title>

</head>

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var patArry = JSON.parse(xmlhttp.responseText);
        parsingPatJson(patArry);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function parsingPatJson(arr) {
    var pat = "";
    var i;

for(i = 0; i < arr.length; i++)
	{
		pat += '<li><a href="#">'
		pat += "PAT version : " + arr[i].version + ", "
		pat += "section : " + arr[i].section_number + ", "
		pat += "program number : " + arr[i].program_number + ", "
		pat += "pmtPid : " + arr[i].pmtPid +  '<br>';
		pat += '</a></li>'
	}

document.getElementById("patList").innerHTML = pat;
}

</script>

<div id="sidetreecontrol"><a href="?#">fold</a> | <a href="?#">unfold</a></div>
	<ul id="tree">
		<li>
			<strong>pat information</strong>
			<ul>
				<div id="patList">
			</ul>
		</li>
	</ul>
</div>

4. 테스트 결과

5. 참고 사이트

[javascript treeview] - 공유해주셔서 감사. 네가 javascript를 뜸성뜸성 알아서 잘 활용했는지 의문임.

http://yangyag.tistory.com/65

'Program Lang. > javascript' 카테고리의 다른 글

sdt version 브라우저에 출력 (0)	2016.07.22
pmt_json.txt 브라우져에 출력 (0)	2016.07.22

CHIPMAKER

pat_json.txt 파일을 이용한 pat 정보 webbrowser로 출력

'Program Lang. > javascript' 카테고리의 다른 글

티스토리툴바