Динамически отображать объекты в JSON - PullRequest
Новая
       5

Динамически отображать объекты в JSON

2 голосов
/ 26 февраля 2020

Данный файл javascript: 

locations: {
"0": {
  name: "Paris",
  lat: "48.866666670",
  lng: "2.333333333",
  color: "default",
  description: "default",
  url: "default"
},
"1": {
  name: "Tokyo",
  lat: "35.666666670",
  lng: "139.750000000",
  color: "default",
  description: "default",
  url: "default"
},
"3": {
  name: "New York",
  lat: "40.71",
  lng: "-74.0059731",
  description: "default",
  color: "default",
  url: "default",
  size: "default"
},
"4": {
  name: "Miami",
  lat: "25.76",
  lng: "-80.19",
  description: "default",
  color: "blue",
  url: "default",
  size: "default"
},
  "5": {
  name: "Los Angeles",
  lat: "34.0522",
  lng: "-118.2437",
  description: "<h5 style='color:blue;font-weight:900;'>Aircraft Carrier:</h5><p>American Airlines</p>",
  color: "blue",
  url: "default",
  size: "default"
},
   "6": {
  name: "Robinson Helicopter R44",
  lat: "25.7090",
  lng: "-80.4381",
  description: "<h5 style='color:blue;font-weight:900;'>Aircraft Carrier:</h5><p style='font-size:.9rem'>American Airlines</p>",
  color: "blue",
  url: "default",
  size: "default"
},
  "7": {
  name: "Robinson Helicopter R44",
  lat: "40.4839361",
  lng: "-3.5679515",
  description: "<h5 style='color:blue;font-weight:900;'>Aircraft Carrier:</h5><p style='font-size:.9rem'>American Airlines</p>",
  color: "blue",
  url: "default",
  size: "default"
},

Это города / населенные пункты для интерактивной карты. JSON для городов сгенерирует значок на карте. Прямо сейчас это состояние c. Можно ли динамически создавать эти JSON объекты с помощью запроса выборки или топора ios, поступающего с определенной конечной точки?

Таким образом, файл в конце должен выглядеть примерно так: 

locations: function() {
      fetch('https://www.podhurst.com/wp-json/wp/v2/aviation_map/')
        .then(res=> res.forEach((item,i)=>{
          "${i}": {
          name: "${item.acf.carrier}",
                lat: "${item.acf.latitude}",
                lng: "${item.acf.longitude}",
                color: "default",
                description: "$item.acf.description",
                url: "default"
          } })
         )},

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

Вы можете преобразовать внутренние объекты в массив, чтобы их было проще визуализировать 

const response = {"4": {...}, "5": {...}};

const cities = Object.keys(response).map((city) => response[city]);
0 голосов
/ 26 февраля 2020

Как то так? 

fetch('https://www.podhurst.com/wp-json/wp/v2/aviation_map/')
    .then(res=>res.json())
    .then(res=>console.log({ ...res }))
...