Finding unique data stored in separate JSON files and loading them individually may require using different methods for

Question

Finding unique data stored in separate JSON files and loading them individually may require using different methods for

I have two JSON files named marker.json and marker.json0 that contain different latitude and longitude coordinates. To load them, I need to rename .json0 to .json (and vice versa), so that the new data from marker.json0 now resides in marker.json. This way, the JavaScript file responsible for handling AJAX requests can parse the data and display markers and infowindows on the map.

In the JavaScript file, there are two functions - searchAddress and removeAddress, triggered by user clicks on "cerca" or "cancella" buttons respectively. The purpose of these functions is to manipulate the JSON array to show or hide markers and infowindows on the map. After editing the code, I encountered new errors related to undefined variables and missing function definitions when interacting with the buttons.

Here's an update to the JS file:
// Updated JavaScript code will go here 

This first JSON array contains information like latitudes, longitudes, titles, and content needed for the map visualization based on the parsed data from the JavaScript file.

[
{
"title": "Paolo", 
"latitude": 41.897115,
"longitude": 12.513300,
"content": "Cooperativa fornitrice di servizi sociali,<br/> Viale Eleonora D'Arborea 12<br/> 00162 Roma<br/> <a href='http://www.prassiericerca.com' target='_blank'>Prassi e Ricerca</a>",
"icon": "img/orange-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
// Additional entries...
]

This second JSON array contains updated information meant to replace the previous data once the file names are switched between .json and .json0. The loading of JSON files and mapping of new data are handled within the JS file.

[
{
"title": "Bar dei Pini", 
"latitude": 41.897115,
"longitude": 12.513300,
"content": "Specialita Gelato Artigianale<br/> Viale Eleonora D'Arborea 12<br/> 00162 Roma<br/> <a href='http://www.prassiericerca.com' target='_blank'>Prassi e Ricerca</a>",
"icon": "img/pink-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
// Additional entries...
]

The page does not require reloads as long as one of the JSON files maintains the .json extension after renaming.

javascript html json css google-maps-api-3

Answer 1

Answer №1

If you want to simplify things, consider keeping the file names as is instead of renaming them. The XMLHttpRequest operation, being client-side, cannot change file names on the server like "json1.json". What's holding you back from restructuring your code so that the part fetching JSON data is turned into a function with the URL passed as an argument?

function Get(url){
  var xmlhttp = new XMLHttpRequest();
  console.log(url);
  var arr; 

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      arr = JSON.parse(xmlhttp.responseText);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  return arr;
}

This approach allows you to fetch any needed files easily. For example:

markers = Get("http://www.example.com/json1.json");
markers.concat(Get("http://www.example.com/json2.json"));

You can also apply a similar method to handle your marker code. By putting it in a function, pass the "markers" variable as an argument to display them on the map.

In essence, dividing your code into functions helps optimize flow and promotes code reuse.

Answer 2

If you want to simplify things, consider keeping the file names as is instead of renaming them. The XMLHttpRequest operation, being client-side, cannot change file names on the server like "json1.json". What's holding you back from restructuring your code so that the part fetching JSON data is turned into a function with the URL passed as an argument?

function Get(url){
  var xmlhttp = new XMLHttpRequest();
  console.log(url);
  var arr; 

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      arr = JSON.parse(xmlhttp.responseText);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  return arr;
}

This approach allows you to fetch any needed files easily. For example:

markers = Get("http://www.example.com/json1.json");
markers.concat(Get("http://www.example.com/json2.json"));

You can also apply a similar method to handle your marker code. By putting it in a function, pass the "markers" variable as an argument to display them on the map.

In essence, dividing your code into functions helps optimize flow and promotes code reuse.

Answer 3

Answer №2

If I have understood your query correctly, here is a workaround that may solve your problem. It appears that the JSON attributes like title, latitude, longitude, content, icon, coords, and type in both files are similar, with only the latitude and longitude values varying. In this scenario, why not create a Plain Old Java Object (POJO) with these properties and use the Gson API to marshal the JSON data into these POJOs? This way, json1 will be represented by pojo object1 and json2 by pojo object2. Then, you can add these objects to a list and pass the list to a JsonParser to generate a combined JSON data from both files. Finally, this JsonParser-generated data can be sent to a JavaScript file. I hope this explanation clears up any confusion.

Answer 4

If I have understood your query correctly, here is a workaround that may solve your problem. It appears that the JSON attributes like title, latitude, longitude, content, icon, coords, and type in both files are similar, with only the latitude and longitude values varying. In this scenario, why not create a Plain Old Java Object (POJO) with these properties and use the Gson API to marshal the JSON data into these POJOs? This way, json1 will be represented by pojo object1 and json2 by pojo object2. Then, you can add these objects to a list and pass the list to a JsonParser to generate a combined JSON data from both files. Finally, this JsonParser-generated data can be sent to a JavaScript file. I hope this explanation clears up any confusion.

Finding unique data stored in separate JSON files and loading them individually may require using different methods for

Answer №1

Answer №2

Similar questions

Tips for updating one-time binding data in AngularJS

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

Guide to setting a dynamic print style without affecting the screen media

PHP fails to retrieve posted data from AJAX when using serializeArray()

What is the best way to evaluate user input against a string retrieved from process.stdin.on()?

Tips for maintaining JSON data in CK Editor

The value of a variable remains constant in an Angular controller

What steps can be taken to stop clients from sending an OPTION request prior to each GET?

"An issue arises where the bokeh plot fails to render when generating a

tips for exporting database information to an excel file with the help of ajax request and javascript

Error encountered during AJAX POST request: NETWORK_ERR code XMLHttpRequest Exception 101 was raised while using an Android device

Creating a bottom bar using React and Material UI

Buttons in Datatables fail to appear when using ajax loading

What is the right height and width to use in CSS?

The Infinite scroll feature in Fuel UX is ineffective when a specific height is not defined for the

When a radiobutton is clicked, a jQuery call to a PHP function triggers an AJAX request which results in a JavaScript function becoming unrefer

Can you explain the meaning of 1__qem?

Converting a timestamp to a date format within AngularJS interpolation

Move the text above within the footer using materialize framework

Unable to locate "Gruntfile.js" Node module for task execution