Exploring JavaScript's capability to parse JSON data

Having some trouble extracting information from the Google Maps API into my application using JavaScript. I'm struggling to figure out how to access the data in the returned JSON object.

        var site = "./maps/scripts/reverseGeocode/locale.php";
        var params = "lat="+lat+"&"+"lng="+lng;

        var object = system.functions().ajax(site, params);

            var result = object.address_components[0];

          alert(result);

The JSON object looks like this...

  {
    "results" : [
      {
     "address_components" : [
       ... (JSON object details omitted for brevity) ...
     ],
     "formatted_address" : "24 Carabella St, Kirribilli NSW 2061, Australia",
     "geometry" : {
       ... (JSON object details omitted for brevity) ...
      },
     "types" : [ "street_address" ]
  },
  {
     ... (Next JSON object details omitted for brevity) ...
  }
  ],
  "status" : "OK" 
 }

I'm trying to access the address component but I'm struggling to navigate the object correctly. Can anyone assist me?

           "long_name" : "Kirribilli",
           "short_name" : "Kirribilli",
javascriptarraysjsonparsinggoogle-maps-api-2

Answer №1

Here's the solution:

let longName = object.address_components[2].long_name;
let shortName = object.address_components[2].short_name;

Update: I recommend using jQuery AJAX for fetching instead:

let site = "./maps/scripts/reverseGeocode/locale.php";
let params = "lat="+lat+"&"+"lng="+lng;

$.get(site + '/' + params, function(data) {
    let longName = data.address_components[2].long_name;
    let shortName = data.address_components[2].short_name;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process of extracting data from a JSON input in PostgreSQL?

Currently, I am in the process of working with a PostgreSQL stored function that involves extracting values from JSON input, matching them with columns in a table, and returning the results in JSON format. Here is an example of my JSON input: { "senso ...

jsonpostgresqlstored-functions

AnimationHandler does not animate the Three.js Mesh

I've been struggling to animate the exported mesh from my blender. Even the included buffalo mesh that I see animated in the example is not working for me. I've been attempting to replicate it without success. Here's the code, and I think th ...

javascriptanimationthree.jswebglblender

Close the Bootstrap Modal by clicking the back button within SweetAlert

**How can I close a Bootstrap modal when clicking the back button in SweetAlert? I have tried using modal.hide() but it's not working. I am using Bootstrap version 5 and even checked their documentation with no luck. Does anyone know how to achieve th ...

javascriptreactjsbootstrap-5sweetalert

"Instead of sending JSON to the AJAX jQuery request, the PHP `json_encode` function is used

Creating a simple contact form as a WordPress plugin, I have developed a form as a popup within the same page: <form method="post" id="w_form" enctype="multipart/form-data"> <label for="first_name" class="text-secondary">First Name</la ...

phpjqueryjsonajaxwordpress

Dealing with click events on layers with z-index positioning

In the map application I am developing, I have implemented 2 z-index layers. However, a problem arises when attempting to zoom in by clicking on these layers. The click handler is located on the lower z-index layer and I do not want it to execute when a co ...

javascriptevent-handlingz-index

Utilizing AngularJS ng-repeat and Bootstrap to showcase database items in columns

I am currently customizing a template for my MEAN app and I am trying to showcase some information retrieved from the database in three columns. However, I am facing an issue where the ng-repeat function is only displaying the data in a single column. Bel ...

javascriptcssangularjstwitter-bootstrap

Using Chrome.downloads.download within a Chrome application

My app is running into an issue where Chrome is giving me the error message that chrome.downloads is undefined. In my attempt to download an image, here is a simple example provided... Here is the manifest: { "manifest_version": 2, "name": "Download ...

javascriptgoogle-chromegoogle-chrome-app

Resize drop zone with drag and drop functionality

I am using jQuery for dragging and dropping elements, but I am facing an issue. When I resize the drop zone while starting to drag an item, it seems like the previous size of the drop zone is still being used as the space. Is there a way to fix this? ...

javascriptjqueryhtmlcssdrag-and-drop

The <iframe> generated by Create-React-App often hinders my ability to interact with or modify the application directly, requiring me to remove it using the browser's element editor

After conducting a global installation of create-react-app, I encountered an issue where instead of editing the rendered content directly in the browser while working on a project, there is a mysterious container created around my app. Upon closer examina ...

javascripthtmlreactjsiframecreate-react-app

Choose an element that has been generated dynamically using jQuery

Here is an example HTML table to work with: <table id="#myTable"> <tr id="#row123"><td>Content</td></tr> </table> To insert a new row using jQuery, you can use the following code: $('#myTable').prepend(&ap ...

javascriptjqueryjquery-selectors

Tips for preventing repetition in an array containing a mix of case-sensitive and case-insensitive strings using Swift

I am working on a tableview that showcases a list of objects of type String using Core Data. Users can continuously add new objects to the table, but I want to prevent duplicates from being added. I have successfully avoided exact duplicates like "Bank" an ...

arraysswiftcore-dataduplicatesnsfetchrequest

Display the selected value in the `vuetify` select component before the user

I have integrated Vuetify into my project and encountered an issue with the select component. Here is how I have set it up: <v-select v-model="gender.value" :items="gender.items" label="Gender" :solo=" ...

javascriptvue.jsvuetify.js

Solution for fixing the error: MongooseError [OverwriteModelError]: It is not possible to overwrite the `User` model after it has been compiled in

I am new to working with the MERN stack and currently attempting to create an exercise tracker app following a tutorial on YouTube. However, I am encountering the Mongoose: OverwriteModelError when running the server and cannot seem to identify where I am ...

javascriptnode.jsmongodbexpressmongoose

Observing a class getter within Vue.js

The issue at hand I am facing a challenge in ensuring my page automatically updates when new data is available. I am using Ionic, and have a page that displays all the items collected by the user in a visually appealing manner using an ion-grid. To achiev ...

javascripttypescriptvue.jsionic-frameworkvuejs3

react-leaflet LayerSelection creates redundant entries in table

Here is the React version I am using: 16.0.0 And for react-leaflet: 1.6.6 I recently attempted to implement a layer controller on my map which consists of two layers, each containing multiple markers. Below is an example of what I have been working on. i ...

javascriptreactjsleafletreact-leaflet

I've been waiting forever for Product.find() to return some results, but it seems to

I have been encountering an issue where my code is supposed to return an empty object of a product but instead it just keeps loading forever. I have thoroughly checked through the code and explored every possible scenario where an error could be occurring, ...

javascriptnode.jsmongodbnext.js

JavaScript and HTML with Node.js

Exploring the world of HTML, running smoothly with a static IP address 192.168.56.152 using apache on the host computer. <!DOCTYPE html> <html > <head> <title>OnlinePage</title> <meta charset="utf-8"& ...

javascripthtmlnode.js

Unexpected behavior encountered when implementing specific Textfield validation with Material UI

Currently running a project on Node and utilizing React for the front-end, I have encountered an issue with setting .env variables. The project is built with Material UI, and most TextFields are working as expected with their specified validation rules. ...

javascriptreactjsmaterial-ui

Polygons that were deleted on Google Maps will reappear once you zoom out

I am working on a map project where I draw polygons. My goal is to remove the previously drawn polygon whenever a new one is being drawn. Initially, everything seems to work fine. However, when I use the scroll function on the map, the previously drawn po ...

javascriptvue.jsgoogle-mapsgoogle-maps-api-3

Is it possible to create various HTML elements from JSON data using JQuery?

Is there a way to utilize Jquery and Javascript to extract JSON data from $ajax and then iterate through it using a foreach loop, in order to create a string that can be appended to the HTML DOM? For example: $(document).ready(function (e) { $.ajax({ ...

javascripthtmljquery