How to extract 2 values from an object with different keys

Question

I'm using mapbox to create a map that has a bunch of book titles based on the author geolocation.

I'm currently doing the following to extract the names of the titles-and the locations of authors.

   var nameValues = names.map((i) => ({i}))
console.log('NAMES VALUES', nameValues)

var extractedValues = business1.map(({type, geometry}) => ({type, geometry}));
 newObj = {
  type: "FeatureCollection",
  features: extractedValues,
properties: ''



};

var i = 0;
while (names.length >0 && i < names.length){
  var properties = {};
  properties.title= names[i];
  extractedValues[i]["properties"] = properties;
  i++;
}     

Which are added to the map like so

  // Add the data to your map as a lyer
    map.addLayer({
      id: 'business_location',
      type: 'symbol',
      minzoom: zoomthreshold,

      // Add a GeoJSON source containing place coordinates and information.
      source:{
        type:'geojson',
        data:newObj
      },
      layout: {
         'icon-image': 'restaurant-15',
  'icon-allow-overlap': true,
      }
    });

The on click method

map.on('click', function(e) {
  // Query all the rendered points in the view
  var features = map.queryRenderedFeatures(e.point, { layers: ['business_location'] });
  var selectedFeatureIndex;


var objValues = newObj


for(i=0; i< names.length;i++){




      console.log(business1)
  dataPosition = i;

    var clickedPoint = objValues.features[i]

    var clickedName = objValues.features[clickedP.dataPosition].properties.title

    console.log(clickedName)
    console.log('clicws',clickedPoint)



    // 1. Fly to the point
    flyToStore(clickedPoint);
    // 2. Close all other popups and display popup for clicked store
    createPopUp(clickedPoint, clickedName);
    // 3. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
      activeItem[0].classList.remove('active');
    }
    // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
    var selectedFeature = clickedPoint._geometry.coordinates;
    console.log(selectedFeature)

    for (var i = 0; i < business1.length; i++) {
      if (business1[i].geometry.coordinates === selectedFeature) {
        selectedFeatureIndex = i;

      }
    }
    // Select the correct list item using the found index and add the active class
    var listing = document.getElementById('listing-' + selectedFeatureIndex);
    listing.classList.add('active');
  }

}
});

This is the output of the newObj (the object im looking in to get the names and geometry).

{type: "FeatureCollection", features: Array(7), nameValues: Array(7)
}
features: Array(7)
0: {type: "Feature", geometry: {…
    }
}
1: {type: "Feature", geometry: {…
    }
}
2: {type: "Feature", geometry: {…
    }
}
3: {type: "Feature", geometry: {…
    }
}
4: {type: "Feature", geometry: {…
    }
}
5: {type: "Feature", geometry: {…
    }
}
6:
geometry: {type: "Point", coordinates: Array(2)
}
type: "Feature"
__proto__: Object
length: 7
__proto__: Array(0)
nameValues: Array(7)
0: {i: "Using Adversarial Autoencoders for Multi-Modal Automatic Playlist Continuation"
}
1: {i: "An update on the 2014 report: "Review of Recircula…em Technologies and their Commercial Application""
}
2: {i: "An update on the 2014 report: "Review of Recircula…em Technologies and their Commercial Application""
}
3: {i: "Comparison of Alternative Meat Inspection Regimes …ontrolled Housing – Considering the Cost of Error"
}
4: {i: "ENSO Drives interannual variation of forest woody growth across the tropics"
}
5: {i: "ENSO Drives interannual variation of forest woody growth across the tropics"
}
6: {i: "The relationship between the abundance of the Nige…on concern in Mbam-Djerem National Park, Cameroon"
}
length: 7

Basically I want to be able to click on a location tile, and for it to show the specific title that corresponds to it. Currently the title is always the first element in the namesValue object since the data poisiton is always set to 0.

But when i click on the point 3-it should then be linked to the 3rd value in the namesValue

Answer 1

You have to build the json in a different way, title is a property of the features:

{
  "type": "Feature",
  "geometry": {
   "type": "Point",
   "coordinates": [-77.03238901390978, 38.913188059745586]
   },
  "properties": {
   "title": "Mapbox DC",
   "icon": "monument"
   }
}

You have to iterate the nameValues array to assign the title inside properties of each feature.

var i = 0;
while (names.length >0 && i < names.length){
  var properties = {};
  properties.title= names[i];
  extractedValues[i]["properties"] = properties;
  i++;
}