javascript - Google Maps/jQuery - 从 json 文件创建对象

Question

这是谷歌地图的一个 plunker，它可以正常工作，但在我度假回来后它就不再工作了。但是您仍然可以更多地查看代码 - https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr

这是谷歌地图代码:

var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.4357808, 4.991315699999973),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

var seg = {
    1: 'investment_cast',
    2: 'forged_Prod',
    3: 'air_Prod',
    5: 'worldwide',
    6: 'structurals'
}

var comp = {
    1: 'structurals',
    2: 'airfoils',
    3: 'wyman',
    4: 'energy',
    5: 'fasteners',
    6: 'struc_comp',
    7: 'mech_hard',
    8: 'engine_prod',
    9: 'corp',
    10: 'aero',
    12: 'timet',
    13: 'spec_metals'
}

var myJSON = {};
var myMarkers=[];

$.getJSON("locations.json", function(json1) {
    myJSON=json1;
    $.each(json1, function(key, data) {
        var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng
        });
        myMarkers[key]=marker;
        marker.setMap(map);

        var infoWindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, 'click', function() {

            if (infoWindow) {infoWindow.close();}
            infoWindow = new google.maps.InfoWindow({
                content: "<h5>" + data.display_name + "</h5>" +
                "<div>" + data.street+ "</div>" +
                "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" +
                "<div class='mapPhoneNum'>" + data.telephone + "</div>" +
                "<a href=" + data.web_url + ">Website</a>"
            });
            infoWindow.open(map, marker);
            map.setZoom(15);
            map.panTo(this.getPosition());

            google.maps.event.addListener(infoWindow,'closeclick',function(){
              resetMapOrigin();
            });

        });

        filterMarkers = function(category){

            var component = category.data("component_id");
            var segment = category.data("segment_id")

            setMapOnAll(null);
            resetMapOrigin();

            var filteredMarkers=[];

            $.each(myJSON, function(key, data) {


                if( typeof(component)!="undefined" ){

                  if( (myJSON[key].component_id == component) && (myJSON[key].segment_id == segment) ){ 
                    filteredMarkers.push(key);
                  }

                }else{
                  if( myJSON[key].segment_id == segment ){
                    filteredMarkers.push(key);
                  }
                }
            });

            for(i=0;i<filteredMarkers.length;i++){
                myMarkers[filteredMarkers[i]].setMap(map);
            }
        }

        function setMapOnAll(map) {
            for (var i = 0; i < myMarkers.length; i++) {
                myMarkers[i].setMap(map);
            }
        }

        function resetMapOrigin(){
          map.setZoom(2);
          map.setCenter({lat:52.4357808,lng:4.991315699999973});
        }
    });

});

所以问题是 var seg ={...} 和 var comp ={...} 被硬编码到一个对象中。我需要做的是使用 $.getJSON (或其他任何可行的方法)从 json 文件中提取数据(就像我正在处理 locations.json 一样)并对其进行格式化与当前对象完全一样 1: 'structurals', 2: 'airfoils', 等等(我需要保留这个结构)。

json文件的格式是这样的-

组件:

[
    {
        "id": "1",
        "display_name": "structurals"
    },
    {
        "id": "2",
        "display_name": "airfoils"
    },
    {
        "id": "3",
        "display_name": "wyman"
    },
    {
        "id": "4",
        "display_name": "energy"
    },
    {
        "id": "5",
        "display_name": "fasteners"
    },
    {
        "id": "6",
        "display_name": "struc_comp"
    },
    {
        "id": "7",
        "display_name": "mech_hard"
    },
    {
        "id": "8",
        "display_name": "engine_prod"
    },
    {
        "id": "9",
        "display_name": "corp"
    },
    {
        "id": "10",
        "display_name": "aero"
    },
    {
        "id": "12",
        "display_name": "timet"
    },
    {
        "id": "13",
        "display_name": "spec_metals"
    }
]

分割:

[
    {
        "id": "1",
        "display_name": "investment_cast"
    },
    {
        "id": "2",
        "display_name": "forged_Prod"
    },
    {
        "id": "3",
        "display_name": "air_Prod"
    },
    {
        "id": "5",
        "display_name": "worldwide"
    },
    {
        "id": "6",
        "display_name": "structurals"
    }
]

那么我怎样才能从上面获取这个 JSON 数据并按照我当前格式化“seg and comp”对象的方式对其进行格式化呢？ (文件名为 components.json 和 segments.json)

提前致谢。

Answer 1

一个解决方案是遍历对象数组，并创建另一个对象，其属性由每个 id 命名。这说明了我的意思，假设您已经获取 json 并将其解析为一个对象:

var data = 
[
    {
        "id": "1",
        "display_name": "investment_cast"
    },
    {
        "id": "2",
        "display_name": "forged_Prod"
    },
    {
        "id": "3",
        "display_name": "air_Prod"
    },
    {
        "id": "5",
        "display_name": "worldwide"
    },
    {
        "id": "6",
        "display_name": "structurals"
    }
];


var seg = {};
data.forEach( function(o) {
  var x = parseInt(o.id);
  seg[x] = o.display_name;
});

console.log(seg);
/*
{ '1': 'investment_cast',
  '2': 'forged_Prod',
  '3': 'air_Prod',
  '5': 'worldwide',
  '6': 'structurals' }
*/

实际上，在实践中，我可能会使用像 lodash 这样的实用程序库来执行此操作，比如使用 keyBy(): https://lodash.com/docs/4.17.2#keyBy

编辑:keyBy() 不会完全按照您的要求执行，因此请忽略该部分。

编辑:此外，如果您正在获取 3 个 json 文件，这些是异步操作，因此您可能需要合并操作并等待所有 json 获取完成。通常这将通过 javascript 中的 Promise(或 Promise 库)来完成:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise