"Can someone guide me on passing a nested JSON array object into the Google Map feature of Angular

Recently, I started working with AngularJS and I've been attempting to pass my JSON data containing latitude and longitude values to the Google Maps API. Here's the structure of my JSON file:


{
 "totalCount":206,
  "deals":[{
       "id":"2",
       "Name":"samir",
       "locations":[{
         "location":"Mundhwa Gaon",
         "address":"Mundhwa Gaon, North Main Road, Pune - 411 001",
          "latLon":"18.53918870,73.90790910"
          },
          "location":"Mundhwa Gaon",
          "address":"Mundhwa Gaon, North Main Road, Pune - 411 001",
          "latLon":"18.53918870,73.90790910"
          },
        ]

   }]
}

Below is the AngularJS code I'm using:


$http({method: 'GET', url: '/api/v1/asas}).success(function(data) {             
            $scope.deal = data.deals;               
            if(data.deals.hasOwnProperty("locations") && data.deals.locations!=null){           

                var location=$scope.deal.locations[0]['latLon'];
                var locationlatlong=location.split(",");
                $scope.map = {center: {latitude: locationlatlong[0], longitude: locationlatlong[1] }, zoom: 4 }
                $scope.options = {scrollwheel: false};
                var markers = [];
                for (var i = 0; i < $scope.deal.locations.length; i++) {
                    markers.push(createmarker(i, $scope.deal.locations[i]['location'], $scope.deal.locations[i]['latLon'],$scope.deal.locations[i]['address']))
                }
                $scope.markers = markers;
                if(browserUnsupported){
                    $scope.showMap=false; 

                }else{                      
                    $scope.showMap=true;      

                }
            }                               
        });

However, I'm encountering an issue with the if condition because it's not getting the expected value. My AngularJS version is 1.2.23.

Answer №1

Within the array named deals, each element is an object that holds the details for a specific deal. To access the information for the i-th deal, iterate over data.deals[i] using a loop.

Answer №2

The condition you are currently using checks for the presence of a "locations" property in the deals array, which it lacks. However, the initial object in the deals array does have a "locations" property. To address this, you can either loop through each item in the deals array and apply the condition:

data.deals.forEach(function(deal) {
  if (deal.locations)...

Alternatively, you could only check the first item:

if(data.deals[0].locations ...

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

jQuery ajaxSetup: handling error retries for ajax calls is not possible

When using $.ajaxSetup(), I am faced with the challenge of making an AJAX request after refreshing a valid token in case the previous token has expired. The issue arises when attempting to execute $.ajax(this) within the error callback. $.ajax({ url: ...

The prop type 'lg' supplied to 'ForwardRef(Grid)' is not valid and has failed

This particular code snippet is responsible for managing the layout of components on the webpage. However, I have encountered some warning messages in the console: Warning: Failed prop type: The lg prop provided to ForwardRef(Grid) is invalid, it should ...

Transferring scope variables to an AngularJS controller with the help of fat arrows

Recently, I decided to update my AngularJS application by incorporating the fat arrow syntax for anonymous functions. I was aware that I needed to be on version 1.5, but encountered some challenges along the way. For instance, I created a unique custom dir ...

Add a hovering effect to images by applying the absolute positioning property

On my React website, I am utilizing Tailwind CSS and I am attempting to showcase an image that has interactive elements. I want certain parts of the image to increase in size slightly when hovered over. My approach to achieving this was to save each part o ...

Ways to retrieve the context of a function caller?

I'm exploring the concept of JavaScript scopes and am curious about a specific scenario: // B has access to 'context' var x = function (context) { y = function () { console.log(context); }; y(); }; x('cool'); ...

Having trouble fetching results from AJAX objects using vanilla JavaScript?

I am currently working on developing my own AJAX prototype without relying on jQuery or any other libraries. However, I am facing an issue where I cannot retrieve any results and the breakpoint set on a specific line is not triggering: The problem seems t ...

Error code 1 encountered an internal error while trying to execute a task

Currently, I have this job set up to clear out unnecessary records. The code provided has been simplified for debugging purposes. However, almost 80% of the time when running it, it fails to find anything due to Error code 1 "internal error": Parse.Cloud. ...

What is the best way to retrieve the promise that encountered an error in the catch block while using async/await

I'm currently in the process of converting code that used .then/.catch to instead use async/await. One particular challenge I'm facing is how to access the original promise that fails within the catch block, for logging purposes. Here is the ori ...

Transfer attributes, but have exclusions in React

At times, we all have a common practice of wrapping DOM elements in custom components. <CustomComponet id="abc" title="abc" nonDomProp="abc" ...andsoforth /> In this example, the custom component wraps a button with pr ...

The canvas is being expanded by utilizing the drawImage method

Ensuring the correct size of a <canvas> element is crucial to prevent stretching, which can be achieved by setting the width and height attributes. Without any CSS applied other than background-color, I am faced with an unusual issue. Using ctx.draw ...

No information available at the moment

When the data is not present, it displays as "display none"... However, I want it to show "no data found" This is the current code if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].styl ...

MaterialUI table rows failing to render

I've been facing a challenge with filling a Semantic UI table using an API. Despite my best efforts, I can't seem to get the table to populate with the data from the API. I've tried adjusting the rows to be a variable instead of a state, an ...

Using a variable in Ajax URL with Action razor syntax

I have a function that calls a method in the controller through an Action URL. However, I need to use a parameter as the name of the method, but unfortunately, this is not possible in the current implementation. function changeDropDownList(id, dropNameToC ...

Exploring Next.js: Advanced capabilities of shallow routing in combination with dynamic routes

Many people seem to be confused about the behavior of shallow routing with dynamic routes in Next.js. When attempting shallow routing, the page is refreshed and the shallow option is ignored. Let's consider a scenario where we start on the following ...

click event to activate delayed function in dropdown

Within the li element, there is an onclick function with a data-toggle="dropdown" attribute. The issue at hand is that my function isn't triggered when I click once, but interestingly it works after clicking twice. https://i.sstatic.net/GdvoT.png I ...

Can cucumber steps be executed conditionally within a single scenario?

I would like to streamline my testing process by using one feature file for both desktop and mobile tests. I am looking to run two separate tests, with one tagged as @mobile and the other as @desktop. By doing this, I can avoid creating a duplicate feature ...

Looping Feature in Ionic Framework's Slides Component

Currently, I am working on developing an application using Ionic-Angular. When it comes to incorporating slides in my app, I opted for the ionic 4 ion-slides component. Everything was going smoothly until I wanted to enable looping for the slides so that u ...

Creating Beautiful Math Equations with LaTeX in EaselJS

Can MathJAX or a similar tool be integrated into an EaselJS DisplayObject? I am looking for alternative options. I want to render text like $$ 5 + 3 - 3 = 5 $$ on a canvas that serves as an EaselJS stage. Ideally, I hope to achieve this using the Text Cl ...

Creating a dynamic JSON structure from an array list of elements: A step-by-step guide

I am faced with the task of transforming an array of employee IDs, listed as follows: empIds: [38670, 38671, 38672, 38673], into a JSON payload structured like this: { "members": [ { "EmployeeId": &quo ...

Can you please explain the purpose of the state object in the setSearchParams hook of react-router-dom v6

Can anyone explain the { state: ? } parameter used in the update function of useSearchParams? const [search, setSearch] = useSearchParams(); setSearch( { ...Object.fromEntries(search), transFilters: JSON.stringify(filters), }, { ...