Mapping relational MongoDB data in website : help needed

Question

I run an Android app which locates OBJECTS with attributes like ID, Name, Owner, Type, Place_ID which are linked to PLACES, on a map. PLACES have attributes like ID, Latitude, Longitude, Opening Hour, Closing Hour,... The data is stored in a MongoDB on Back4App and I want to keep that way. I have one class for OBJECTS and one class for PLACES. The relation between OBJECTS and PLACES is not "a MongoDB relation", it is just a common String field in the OBJECTS and PLACES classes. In order to allow offline access to the data and to minimize DB server requests, the app synchronizes a local SQLITE database on the device with the MongoDB online database. In the Android App, the queries are passed to the SQLITE DB.

I'm trying to make a website which does the same job as the app, which is displaying filtered data from the MongoDB.

I started with a simple html and javascript website using the Parse SDK, but I'm facing a few difficulties.

A simple query is to list all the OBJECTS in a 50km radius, i.e. I need the OBJECTS and the PLACE where they are located. However, where I could get this easilty with a SELECT...JOIN in SQLITE, I cannot get this information through a simple Parse query because I want to know the OBJECTS too. And I cannot run 2 asynchronous queries in a for loop.

What website architecture and/or languages would you recommend for this type of website ?

How would you recommend to proceed ?

Thanks in advance for your help.

EDIT: ZeekHuge opened my eyes on the bad design of not using pointers. After implementing pointers in my MongoDB, here's the lines of codes which did it for me :

Parse.initialize("", "");
Parse.serverURL = '';

var eiffel = new Parse.GeoPoint(48.858093, 2.294694);
var myScores = '';
var Enseigne = Parse.Object.extend("ENSEIGNE");
var Flipper = Parse.Object.extend("FLIPPER");

var query = new Parse.Query(Flipper);
var innerquery = new Parse.Query(Enseigne);
innerquery.withinKilometers("ENS_GEO",eiffel,500);

query.equalTo("FLIP_ACTIF", true);
query.include("FLIP_ENSPOINT");
query.include("FLIP_MODPOINT");
query.matchesQuery("FLIP_ENSPOINT", innerquery);
query.find({
  success: function(results) {
    for (var i = 0; i < results.length; i++) {
      var object = results[i];      
      myScores += '<tr><td>' + object.get('FLIP_MODPOINT').get('MOFL_NOM')
      + '</td><td>' + object.get('FLIP_ENSPOINT').get('ENS_NOM')
      + '</td><td>' + object.get('FLIP_ENSPOINT').get('ENS_GEO').latitude
      + '</td><td>' + object.get('FLIP_ENSPOINT').get('ENS_GEO').longitude
      + '</td></tr>';
    }
    (function($) {
      $('#results-table').append(myScores);
    })(jQuery);
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

Answer 1

Solved by replacing the database keys by pointers and using the Innerquery and include functions. See exemple mentionned in question.