Как преобразовать массив php массива в массив js с помощью .map для переформатирования

Question

Я пытаюсь взять массив массива в PHP и преобразовать его в массив javascript с новым форматированием текста в формате JSON. Как лучше всего вносить изменения в форматирование при преобразовании массива в JSON?

Я пытался использовать json_encode при переносе массива в Javascript ... но, похоже, создается массив JS, представляющий собой строку, в результате чего .map возвращает ошибку. Я могу заставить функцию .map работать с одной переменной, содержащей жесткий код моего массива. Я не могу заставить .map вносить изменения в формат, когда я просто конвертирую свой массив php в массив json. Я также попытался сделать изменение формата по одному результату за раз, как это появляется в запросе 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]]
)

Но мне нужно, чтобы это был массив JS в формате json с такими изменениями текста:

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)

Answer 2

Спасибо всем за ваш вклад ... Оказывается, мой массив из PHP был не массивом, а строкой, которая выглядела как массив ... Я хотел бы взять кредит на это решение, но я был я учился у классного архитектора, которого я знаю, и он дал мне одну строчку, чтобы решить эту проблему. Весь код, который вы предоставили, ребята, работал, за исключением того, что мой оригинальный массив был сломан, поэтому это не было полным исправлением. Вот ответ.

var myFences = Array.from(<?php echo json_encode($fences)?>).map(e => eval(e).map(p => ({lat:p[0],lng:p[1]})));

console.log(myFences)

Возвращает правильно отформатированный массив, который я могу использовать для создания правильного вывода.

Answer 3

Вот модифицированный код, который вернет вывод согласно вашему требованию.

var myFences = [];
var jfences = <?php echo json_encode($fences)?>;// puts php array into json formatting into js.
jfences.forEach(array => {
    array.map(e => {
        myFences.splice(myFences.length, 0, ({lat: e[0], lng: e[1]}));
    });
}); 
console.log(myFences);


// Output of myFences var
   [
      {"lat": 56.51845972498524,"lng": -6.182719791640125},
      {"lat": 56.52412387806186,"lng": -6.18409308265575},
      {"lat": 56.523103365873006,"lng": -6.1784282572162965},
      {"lat": 58.472119674062085,"lng": -8.168053780198875},
      {"lat": 58.47303462652167,"lng": -8.161809597612205},
      {"lat": 58.46960999252895,"lng": -8.160264645219627}
    ]

или дайте мне знать, если вы хотите что-то еще ...

Answer 4

Попробуйте следующий фрагмент

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

a = a.map(b => {
  return b.map((c, i) => {
    return {
      lat: c[0],
      lng: c[1]
    }
  })
})

console.log(a)

Answer 5

Вот что я использую:

function jsonObjToArray(jsonObj) {
  var result = [];

    var keys = Object.keys(jsonObj);

    keys.forEach(function (key) {
        result.push(jsonObj[key]);
    });

    return result;
}

Я думаю, что это быстрый способ достичь того, что вам нужно.