javascript - 如何使用 .map 重新格式化将 php 数组转换为 js 数组

Question

我正在尝试在 PHP 中获取数组的数组，并将其转换为具有 JSON 格式的新文本格式的 JavaScript 数组。将数组转换为 JSON 时进行格式更改的最佳实践是什么？

当我将数组引入Javascript时，我尝试使用json_encode...但这似乎创建了一个作为字符串的JS数组，从而使.map返回错误。我可以让 .map 函数处理包含数组硬代码的单个变量。当我将 php 数组转换为 json 数组时，我无法让 .map 进行格式更改。我还尝试过一次更改一个结果的格式，因为它出现在 MySQL 查询中，但我尝试的任何方法都不起作用。我对 JS 很陌生，因此在数组转换和 json 重新格式化相结合的细节上遇到了困难。

var myFences = [];
var jfences = <?php echo json_encode($fences)?>;// puts php array into json formatting into js.
var myFences = Array.from(jfences);

myFences = myFences.map ( e => ({lat: e[0], lng: e[1]}) ) ; 
console.log(myFences); 
var myFences = [$jfences[1]];

let path = jfence; 
path = path.map ( e => ({lat: e[0], lng: e[1]}) ) ; 

php 数组的输出如下所示:

Array
(
[0] => [[56.51845972498524, -6.182719791640125],
        [56.52412387806186, -6.18409308265575],
        [56.523103365873006, -6.1784282572162965]]
[1] => [[58.472119674062085, -8.168053780198875],
        [58.47303462652167, -8.161809597612205],
        [58.46960999252895, -8.160264645219627]]
)

但我需要它是一个 json 格式的 JS 数组，并且文本更改如下:

var geofence = [
    {lat: 56.51845972498524, lng: -6.182719791640125},
    {lat: 56.52412387806186, lng: -6.175282560388155},
    {lat:56.523103365873006,lng: -6.147215925256319}
];

这是用于生成 php 数组的代码:

$sql = "SELECT `poly_data` FROM `landowner_polygon` WHERE `landowner_location_id`=".$llocID;

if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){

        echo "<table>";
            echo "<tr>";
                echo "<th>poly_data</th>";
            echo "</tr>";
        while($row = mysqli_fetch_array($result)){
            echo "<tr>";
                echo "<td>" . $row['poly_data'] . "</td>";
                $llocFence = $row['poly_data'];
                $allFences = $allFences.$llocFence;
                $fences[] = $llocFence; 
            echo "</tr>";
        }
        echo "</table>";

        // Free result set
        mysqli_free_result($result);
    } else{
        echo "No records matching your query were found.";
    }
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}

// Close connection
mysqli_close($link);


}

Answer 1

使用.map来映射数组，并使用.flat()函数来展平数组。

const geoFence = jfences.map((item) => {
  return item.map(geo => {
    return {
      lat: geo[0],
      log: geo[1]
    }
  })
}).flat()

const jfences =  [[[56.51845972498524,-6.182719791640125],[56.52412387806186,-6.18409308265575],[56.523103365873006,-6.1784282572162965]],[[58.472119674062085,-8.168053780198875],[58.47303462652167,-8.161809597612205],[58.46960999252895,-8.160264645219627]]]


const geoFence = jfences.map((item) => {
  return item.map(geo => {
    return {
      lat: geo[0],
      log: geo[1]
    }
  })
}).flat();

console.log(geoFence)

没有.flat()

const jfences =  [[[56.51845972498524,-6.182719791640125],[56.52412387806186,-6.18409308265575],[56.523103365873006,-6.1784282572162965]],[[58.472119674062085,-8.168053780198875],[58.47303462652167,-8.161809597612205],[58.46960999252895,-8.160264645219627]]]

const fencesArrObj = jfences.map((item) => {
  return item.map(geo => {
    return {
      lat: geo[0],
      log: geo[1]
    }
  })
})

const geoFence = [].concat.apply([], fencesArrObj);

console.log(geoFence)