Encountering an issue with receiving "undefined" values while utilizing WordPress post metadata in AngularJS

Utilizing the Wordpress REST API v2 to fetch data from my functional Wordpress website to an AngularJS application. Everything is functioning properly, however when I attempt to access post meta such as "_ait-item_item-data", it returns an error stating "undefined".

This is the code I am using to retrieve the post meta:

$scope.fieldOne = $scope.businessDetails.post_meta_fields._ait-item_item-data;

And I intend to display:

{{fieldOne}}

I understand that the issue lies in the presence of underscores and hyphens, but how can I extract the meta data with these characters included?

The error displayed in the console is as follows:

ReferenceError: item_item is not defined 
at itemSingleCtrl.js:13 
at angular.js:16170 
at m.$eval (angular.js:17444) 
at m.$digest (angular.js:17257) 
at m.$apply (angular.js:17552) 
at l (angular.js:11697) 
at K (angular.js:11903) 
at XMLHttpRequest.y.onload (angular.js:11836)
javascriptangularjswordpresswordpress-rest-api

Answer №1

Because of the presence of a hyphen in your property, you are unable to utilize dot notation for accessing its value. You will need to access it as shown below:

$scope.fieldOne = $scope.businessDetails.post_meta_fields["_ait-item_item-data‌​"]

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

In the 4.13.1 version of Express, req.body is not defined

I'm facing a problem and seeking help to find the solution. Here's what I have in the Angular view: <form ng-submit="submit()"> <input ng-model="stickie_text" type="text" id="sticky_content" /> <button type="submit" id="add_stick ...

angularjsnode.jsexpressbody-parser

Utilizing Javascript for a Stopwatch/Countdown in the Format: 00:00:00

I am currently working with this block of code: function startStopwatch() { vm.lastTickTime = new Date(); $interval.cancel(vm.timerPromise); vm.timerPromise = $interval(function() { var tickTime = new Date(); ...

javascriptangularjsmomentjsangular-moment

The webpage is failing to refresh even after using history.push()

While working on my React dictionary project, I encountered an issue with React Router. After using history.push() with the useHistory hook from react-router, the page does not re-render as expected. I have a search bar and utilize this function to navigat ...

javascriptreactjsreact-router

Finding the index and value of a specific HTML element with jQuery click event

I'm currently working on creating an Ajax function to delete items from a list using Jquery ajax. Here is the HTML structure: <ul> <li><a class="del"><span style="display:none;">1</span></a></li> <li& ...

javascriptjqueryajax

Unable to retrieve data for the initial keystroke in jQuery autocomplete

I'm currently working on setting up jQuery autocomplete with a specific method involving a separate source function and an intermediary variable for data storage. My main goal right now is to successfully pass the data to the source part of the autoCo ...

javascriptjqueryajaxjquery-autocomplete

Ways to disable an AJAX loading animation

In my current script, I am loading external content using the following code: <script type="text/javascript"> var http_request = false; function makePOSTRequest(url, parameters) { // Code for making POST request } function alertContents() { ...

javascriptajaxformsxmlhttprequestloading

How can I rectify the varying vulnerabilities that arise from npm installation?

After running npm audit, I encountered an error related to Uncontrolled Resource Consumption in firebase. Is there a solution available? The issue can be fixed using `npm audit fix --force`. This will install <a href="/cdn-cgi/l/email-protection" clas ...

javascriptnode.jsfirebasenpmnpm-install

Increasing the size of a div container based on the position of the cursor on the

I recently stumbled upon a fantastic website where two images slide left and right based on mouse movement. When the cursor is on the right, the right part of the image expands, and when it's on the left, the left part expands. You can check out the ...

javascriptjqueryhtmlcss

Using Jquery to loop through various select options within a designated container div

I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...

javascriptjqueryhtmlloops

What is the best way to convert template interpolation using different words into a correct expression syntax in JavaScript regex?

I have a string that contains template interpolation along with words that are not inside the interpolation. The string can be in one of these various forms: foo{{bar}} {{foo}}bar foo{{bar}}baz {{foo}}{{bar}} foo {{foo}} {{foo}}bar{{baz}} The text interpo ...

javascript

Custom template consistently displays shortcode output at the top position

the shortcode I created keeps appearing at the top of my custom template. Here is the code snippet for my custom template: $tag= 'the_content'; remove_all_filters( $tag); $postid = get_the_ID(); $post = get_post($postid); $content = do_shortcod ...

phpwordpressshortcode

Troubleshooting: Issue with Updating Views in Angular JS

I've been attempting to change the view from the controller, but it's just not working properly. app.js var app = angular.module('vla', ['ngRoute']); app.config(function ($routeProvider){ $routeProvider ...

javascriptangularjssingle-page-applicationangularjs-routing

Need help fixing my issue with the try-catch functionality in my calculator program

Can someone assist me with my Vue.js calculator issue? I am facing a problem where the output gets added to the expression after using try and catch. How can I ensure that both ERR and the output are displayed in the {{output}} section? Any help would be a ...

javascriptcssvue.jsbootstrap-4calculator

Obtain the jQuery dialog's closure event within the $.Ajax completion function

I have developed a custom jQuery plugin that utilizes jQuery Dialog to showcase messages. Specifically, I am using it within my jQuery $.ajax -->done function. My goal is to capture the close event of the Dialog in the .ajax function so that I can redire ...

javascriptajaxasp.net-mvcasp.net-ajaxjquery-dialog

Refresh the webpage when using the browser's back or forward button in AngularJS with ui-router

In my AngularJS app, I have configured the ui-router state as follows: $locationProvider.html5Mode(true); $stateProvider .state('index', { url: '/index?zoom&center', views: { ...

javascriptangularjsangular-ui-routerhtml5-history

Incorporate attributes into object properties in a dynamic manner

Currently, I am experimenting with bootstrap-multiselect and my goal is to incorporate data attributes into the dataprovider method. Existing Data Structure: var options = [ {label: 'Option 1', title: 'Option 1', value: ' ...

javascriptjquerybootstrap-multiselect

Mongoose, Angular, and Express are not functioning properly when using the PUT method

I'm having trouble with implementing a basic edit function in my application. The delete and get functions are working fine, but I keep encountering a 500 error when trying to make a put request. I've attempted using findByIdAndUpdate and FindOne ...

angularjsnode.jsmongodbexpressmongoose

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

javascripthtml

Enhance your website with a lightbox effect using FancyBox directly in your JavaScript code

I am currently experiencing an issue with implementing fancybox on my website. I have a website that features links to articles, which open in fancybox when clicked. The problem arises when a user tries to access an article directly. In this case, the use ...

javascriptphpjqueryfancybox-2

Angular's route resolve feature does not wait for the promise to resolve before

I just started using angular and I'm facing an issue with my user route. I'm trying to resolve the user object before rendering the view, but even after injecting $q and deferring the promise, the view is loading before the promise gets returned. ...

javascriptangularjsangularjs-routing