자동 마커 생성(4)

php를 인라인으로 사용해서 값을 가져오는게 문제가 있다는 걸 알았다.
그리고 for문 안의 php의 변수 $i 가 for문이 반복됨에 따라 같이 변하는 것이 아닌 php안의 구문이 먼저 실행돼서 이미 정해진 값이 출력된다는 것을 알았다.

그래서 DB에서 전체 값을 가져오는 코드를 php로 작성하고 그걸 json을 이용해서 배열로 만들고 거기서 값을 가져와서 var marker에 넣는 방법이 좋을 것 같다.

php와 js는 구분해서 써야 한다.

<script>
			var positions = [1,2,4];
		<?php
			$dsn = "mysql:host = localhost; dbname = tasty; charset = UTF8";
			$pdo = new PDO($dsn, "root", "");
			if($pdo){
				echo "console.log('연결 성공');";
			};
			
			$statement = $pdo->prepare("select R.* from restaurants R LIMIT :kkk");
			$statement -> bindValue('kkk',$row,PDO::PARAM_INT);
			
			$statement->execute();
			$rows = $statement->fetchAll();
			echo 'var postitions = ' . json_encode($rows) . ';';
			?>
			positions.forEach(pos => console.log(pos));
		</script>

배열에 이미 들어있던 값들은 잘 출력이 되지만 가져온 값은 출력이 되지 않는다.

json을 처음 사용하는 거라 어디서 오류가 발생했는지 아직 파악하지 못했다.

echo "console.log(".json_encode($rows).");";

콘솔에 빈 배열이 나타나는 걸 보면 가져오는 과정에서 오류가 생긴 것 같다.

<script>
			//마커를 담을 배열
			var positions = [];

			//num_rows()의 수만큼 각 행의 정보를 가져와서 마커에 정보를 담기
				<?php
					$query = "select R.* from restaurants R";
					
					$result = mysqli_query($dbcon,$query);
					while($row = mysqli_fetch_assoc($result)){

						$test[] = $row; 
						echo 'var positions = ' . json_encode($test) . ';';
					};
					

			?>
			
		</script>

드디어 배열로 만들어서 가져오는데에 성공했다.

이제 이 배열을 원래 규칙에 맞게 변형하여 배열을 재생성하면 된다.

var markers = [];
for(i = 0; i < positions.length; i++){
  var loc = positions[i].location;
  var [lat, lng] = loc.split(',');
  lat = Number(lat);
  lng = Number(lng);
  
  var marker = {
    index : positions[i].idx,
    title : positions[i].restaurantName,
    latlng : new kakao.maps.LatLng(lat, lng),
  content : '<div class="overlaybox">' +
  '    <div class="boxtitle">'+positions[i].restaurantName+'</div>' +
  '    <div class="first">' +
  '        <div class="triangle"></div>' +
  '        <div class="categori">'+positions[i].categori+'</div>' +
  '    </div>' +
  '    <div class="instaId">'+positions[i].instaId+'</div>' +
  '    <ul class="information">' +
  '        <li class="address">' +
  '            <div class="addr">주소</div>' +
  '            <div class="addr1">'+positions[i].addr1+'</div>' +
  '            <div class="addr2">'+positions[i].addr2+'</div>' +
  '        </li>' +
  '        <li class="review">' +
  '            <div class="review1">한줄평</div>' +
  '            <div class="review2">'+positions[i].review+'</div>' +
  '        </li>' +
  '    </ul>' +
  '</div>'
};
  markers.push(marker);
}
console.log(markers);

DB에 있는 정보를 가져와서 알아서 마커 만들기 성공