Tips for utilizing variables with space within AngularJS ng-repeat

Currently, I am utilizing a 3rd party API to populate my front end with data. Due to the nature of the API, I do not have control over it and am simply displaying information using REST URLs.

<tr ng-repeat="stat in allStats">
      <td>{{stat.date}}</td>
      <td>{{stat.Organic Inbound}}</td>
</tr>

I am facing an issue with the {{stat.Organic Inbound}} property. The presence of a space within the variable name is causing difficulties as I am unable to modify the backend format. Can you advise on how to handle such variables within AngularJS ng-repeat loop? I recall encountering this situation before but cannot remember the exact solution. I attempted techniques like

<td>{{stat.$(Organic Search)}}</td>
and
<td>{{stat.'Organic Search')}}</td>
, among others, without success.

Due to the large volume of incoming data, manually mapping the object in the JavaScript controller to alter it would be impractical and slow down the process significantly. Is there a way to utilize \ to ignore the space in the variable name? Any insights or suggestions are greatly appreciated.

Answer №1

To access this information, you must use square brackets in the following manner:

<td>{{stat['Organic Inbound']}}</td>

The reason for using square brackets is that Organic Inbound serves as the key within the object stat, and since it contains a space, evaluating the entire string value Organic Inbound requires the use of square brackets to recognize it as the key of stat.

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 causes the disappearance of an entire component's code?

Can someone please explain what just happened here? Is it a problem with VS Code or is it a hardware issue? Sometimes my HDD appears to be undetected (not sure if it's due to malfunction of the HDD or something else). https://i.sstatic.net/BVCNm.png ...

Exception Thrown When Element is Not Visible in Robot Framework

I encountered an ElementNotVisibleException error, even though the element appeared to be visible based on the screenshot in the logs. The button is controlled by JavaScript and can switch between enabled and disabled states. Here's the code for the d ...

What is the best way to connect this image and comments div using only CSS?

I'm trying to ensure the comments div is the same height as the image above so they can be aligned side by side. Below is my current code: <div class="main_image_wrapper"> <img class="main_image" src="*dynamic generated image*" style="ma ...

Is there a way to access a controller's $scope value from a different page?

Here is a simple demonstration of Angular Routing: <li><a ui-sref="Login()">Login</a></li> <li><a ui-sref="Logout()" ng-show="!usersessionData">Logout</a></li> MyApp.js var app = angular.mo ...

struggling to navigate the request to a different HTML page from the controller using AngularJS

Having a situation where I need Page A to render Page B with the values entered on Page A upon submission. Page A is connected to controller A, and when the click event triggers, the Spring controller renders Page B. The problem I'm encountering is t ...

What is the most effective way to structure data for seamless integration with popular MV* frameworks such as Angular, Backbone, Ember, and others?

Seeking to expand my knowledge, I, a front-end developer with limited experience in server-side code, am looking for guidance on structuring data efficiently. Imagine a user profile page on a Rails-based site utilizing Angular.js, where the Angular code re ...

vue.js watch function failing to update

Hello, I'm just getting started with Vue and currently facing a challenge. I am attempting to update a couple of variables based on changes in another computed variable. The computed variable is connected to a Vuex store and functions correctly, displ ...

Experiencing issues with retrieving Geolocation, encountered error message: "Uncaught TypeError: Cannot set property 'value' of null"?

var lat = document.querySelector("#lat"); var long = document.querySelector("#long") var latLong = document.getElementById("latLong"); if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(myPosition) } else { latLong.innerHTML = "sorry ...

Prevent navigation bar from appearing within the top 2em of the viewport

My website has a navigation bar that begins at the bottom left of the page. I would like it to pause 2em from the top of the viewport when scrolling up. <script> var mn = $(".main-nav"); mns = "main-nav-scrolled"; $(window).scroll(function() ...

Three.js is capable of displaying a scene background, but it does not currently show any

I feel like I'm at my wit's end. I've been struggling to make anything render in this simple three.js program and it's driving me insane. I've tried everything - adding cubes, copying geometries, adjusting lights, moving the camera ...

Show the identical Javascript code in Bootstrap columns with a size of col-sm6

I have a javascript code with a function called fuctionone() that generates a graph. I include this code within a p tag so that when 'HERE' is clicked, the graph is displayed below each section header. <svg width="480" height="250"> <di ...

Experiencing Difficulty accessing Methods with Jmeter-Webdriver

var pkg = JavaImporter(org.openqa.selenium) var support_ui = JavaImporter(org.openqa.selenium.support.ui.WebDriverWait) var wait = new support_ui.WebDriverWait(WDS.browser, 5000) **var support_page=JavaImporter(org.openqa.selenium.WebDriver.Timeouts)** **v ...

Achieving Dynamic Center Alignment of Filtered Node in SVG Using D3

I am currently implementing filter functionality for my d3 graph. The goal is to allow users to search for a specific node by label or ID, then re-render the graph to display the entire structure with the filtered node positioned at the center of the SVG e ...

Can I exclusively utilize named exports in a NextJS project?

Heads up: This is not a repeat of the issue raised on The default export is not a React Component in page: "/" NextJS I'm specifically seeking help with named exports! I am aware that I could switch to using default exports. In my NextJS ap ...

How can I stop the hover event on a series in Highcharts from triggering a hover event on the nearest point (marker)?

When hovering over the series line on a date-time chart, the default behavior is to trigger the hover event on the nearest point of the series. However, I only want to trigger the hover event on the markers (points), not the series itself. If I use stopP ...

Unable to transfer a callback function from SocketIO to typescript

My server is built with nodeJS and Typescript utilizing SocketIO for an online chat application. However, I am facing difficulties in transferring the callback function provided by TypeScript library. Can someone guide me on how to correctly call the call ...

Problem with Inserting Blank Data into MySQL Database Using Ionic Framework and PHP

I am currently working on developing a mobile hybrid app using the Ionic framework. However, I have encountered an issue where blank data is being inserted into the database when trying to insert new data. I am struggling to identify what mistake I might b ...

The button in my form, created using React, continuously causes the page to refresh

I tried to create a chat application using node.js and react.js. However, I'm facing an issue where clicking the button on my page refreshes the entire page. As a beginner in web development, please forgive me if this is an obvious problem. You can fi ...

Using Javascript to search and refine a JSON field based on a specific string

I am attempting to use JavaScript to filter a JSON field based on a string input. Essentially, I have a search box and a simulated JSON response. When I type letters into the search box, an ajax call should filter my simulated response based on the input s ...

Tips for verifying the existence of a file in a React application

I'm currently working on a Next.js React website that retrieves audio files from an API and saves them locally. My main goal is to prevent redundant API calls by checking if a file already exists before making the request. While I've found numero ...