迭代json数据中的问题，一遍又一遍地迭代相同的数据

Question

I have a iteration problem with json data. I send an array to javascript. To use it convert it to json data and pass it to javascript var.

<script>
  var estates = <?php echo json_encode($estates);?>;

  function initMap(){
    var options =
        {
            zoom : 6,
            center : {lat:34.652500, lng:135.506302}
        };

    var map = new google.maps.Map(document.getElementById('map'), options);
    @foreach ($estates as $est)
    var marker = new google.maps.Marker({
              map: map,
              icon: 'imgs/marker.png',
              url: "/pages/{{$est->id}}",
              label: {
                  text: estates.data[0].price,
                  color: "#fff",
              },
              position: {
                  lat: {{$est->lat}},
                  lng: {{$est->lng}}
              }
          });

     google.maps.event.addListener(marker, 'click', function () {
       window.location.href = this.url;
     });
  @endforeach
  }
</script>

But at this line estates.data[0].price, my label is iterate same price over and over. it's because i am giving [0] to it. But if I don't give a number then it doesn't go into data and couldn't find the price . Is there anyway to iterate json. because now it giving me same price over and over like this

By the way I already tried the iteration below. But this time every each marker label having the ALL prices at once...

for(let i = 0; i < estates.data.length; i++){
        var marker = new google.maps.Marker({
          map: map,
          icon: 'imgs/marker.png',
          url: "/pages/{{$est->id}}",
          label: {
              text: estates.data[i].price,
              color: "#fff",
          },
          position: {
              lat: {{$est->lat}},
              lng: {{$est->lng}}
          }
      });
}

And also I tried this as well:

<?php
    $js_array = json_encode($estates);
    echo "var estates = ". $js_array . ";\n";
   ?>;

for(var i = 0; i < estates.data.length; i++){
  var needle = estates.data[i];
  for(var key in needle){
    var obj = needle.price;
    console.log(obj)
  }
}

for(var itr = 0; itr < obj.length; itr++){
    var marker = new google.maps.Marker({
      map: map,
      icon: 'imgs/marker.png',
      url: "/pages/{{$est->id}}",
      label: {
          text: obj[itr],
          color: "#fff",
      },
      position: {
          lat: {{$est->lat}},
          lng: {{$est->lng}}
      }
    });
}

But still not running properly....

Answer 1

Maybe you just have to wrap a for loop around it. I could not test it, because I don't have the PHP code.

@foreach ($estates as $est)
for(let i = 0; i < estates.data.length; i++){
        var marker = new google.maps.Marker({
          map: map,
          icon: 'imgs/marker.png',
          url: "/pages/{{$est->id}}",
          label: {
              text: estates.data[i]
              color: "#fff",
          },
          position: {
              lat: {{$est->lat}},
              lng: {{$est->lng}}
          }
      });
}

 google.maps.event.addListener(marker, 'click', function () {
   window.location.href = this.url;
 });

Edit: Or you could try to edit this line text: {{$est->data}}

Edit² : Just delete the php stuff and only run in javascript? I deleted the php foreach loop and just try to use the javascript object.

<script>
  var estates = <?php echo json_encode($estates);?>;

  function initMap(){
    var options =
        {
            zoom : 6,
            center : {lat:34.652500, lng:135.506302}
        };

    var map = new google.maps.Map(document.getElementById('map'), options);
    for(let i = 0; i < estates.length; i++){
    var marker = new google.maps.Marker({
              map: map,
              icon: 'imgs/marker.png',
              url: "/pages/"+estates[i].id,
              label: {
                  text: estates.data[0].price,
                  color: "#fff",
              },
              position: {
                  lat: estates[i].lat,
                  lng: estates[i].lng
              }
          });
     google.maps.event.addListener(marker, 'click', function () {
       window.location.href = this.url;
     });
    }
  }
</script>

I hope that helps

Answer 2

Solved the problem with a little touch.

var marker = new google.maps.Marker({
      map: map,
      icon: 'imgs/marker.png',
      url: "/pages/{{$est->id}}",
      label: {
          text: "{{$est->price}}",
          color: "#fff",
      },
      position: {
          lat: {{$est->lat}},
          lng: {{$est->lng}}
      }
});

Price is varchar, so used this loop in quotes "{{$est->price}}" and now need to json.encode also...