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

Question

我对json数据有迭代问题。我向javascript发送一个数组。要使用它，请将其转换为 json 数据并将其传递给 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>

但是在这条线上estates.data[0].price,我的标签是一遍又一遍地迭代相同的价格。 这是因为我给它 [0]。但是如果我不给出一个数字，那么它就不会进入data，也找不到price.无论如何可以迭代 json。因为现在它像这样一遍又一遍地给我相同的价格

顺便说一下，我已经尝试了下面的迭代。但是这一次，每个标记标签都同时具有所有价格......

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}}
          }
      });
}

我也尝试过这个：

<?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}}
      }
    });
}

但仍然无法正常运行....

Answer 1

也许你只需要在它周围包装一个 for 循环。我无法测试它，因为我没有PHP代码。

@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;
 });

编辑

：或者您可以尝试编辑此行text: {{$est->data}}

Edit²：只是删除php的东西，只在javascript中运行？我删除了 php foreach 循环，只是尝试使用 javascript 对象。

<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>

我希望这有所帮助

Answer 2

稍微触摸一下就解决了这个问题。

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}}
      }
});

价格是varchar，所以在引号"{{$est->price}}"中使用了这个循环，现在还需要json.encode...