JSFiddle - React, Tailwind, and code Playground

HTML

<div id="locality"></div>
<div id="administrative_area_level_1"></div>

JavaScript

var address_components = [
        {
           "long_name" : "Salem",
           "short_name" : "Salem",
           "types" : [ "locality", "political" ]
        },
        {
           "long_name" : "Rockingham",
           "short_name" : "Rockingham",
           "types" : [ "administrative_area_level_2", "political" ]
        },
        {
           "long_name" : "New Hampshire",
           "short_name" : "NH",
           "types" : [ "administrative_area_level_1", "political" ]
        },
        {
           "long_name" : "United States",
           "short_name" : "US",
           "types" : [ "country", "political" ]
        }
     ];

Array.prototype.getByType = function(type){
    for(var i = 0 ; i< address_components.length; i++){
        var obj = address_components[i];
        var arr = obj["types"];
        for(var j = 0; j<arr.length;j++ ){
            if(arr[j] == type){
                return obj;
            }
        }
        
    }
}

function getLocality(){
    for(var i = 0 ; i< address_components.length; i++){
        var obj = address_components[i];
        var arr = obj["types"];
        for(var j = 0; j<arr.length;j++ ){
            if(arr[j] == "locality"){
                return obj;
            }
        }
        
    }
}
function getAdministrativeArea1(){
    for(var i = 0 ; i< address_components.length; i++){
        var obj = address_components[i];
        var arr = obj["types"];
        for(var j = 0; j<arr.length;j++ ){
            if(arr[j] == "administrative_area_level_1"){
                return obj;
            }
        }
        
    }
}

$("#administrative_area_level_1").html(address_components.getByType("administrative_area_level_1").long_name);
$("#locality").html(getLocality()["long_name"]);