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

Tips for positioning and resizing images within a changing DIV dimension

My DIV element is adjusting its size based on the browser window. Inside this DIV, there is an image that should fill up the entire browser window without stretching out of proportion when the window dimensions change. In addition, I want the image to be ...

javascriptjqueryhtmlcss

Determine if the value is present in every element of the array and return true

I am looking for a way to determine if all products have the status "Done" in their respective statusLog arrays. If any product does not contain "Done" or lacks the statusLog property altogether, then the function should return false. Although the current ...

javascriptnode.js

Acquire data from an HTML Element

I was provided with the following div that was already created for me: <div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1 ...

javascriptjquery

hiding a dropdown menu in vuejs when clicking outside of it

Utilizing dropdown menu components in vuejs to create a standard dropdown menu. The code for the dropdown component is as follows: <template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDro ...

javascriptdrop-down-menuvue.jsvuejs2vue-component

The onClick event for "history.go(0)" is functional in Internet Explorer, but it does not work in Mozilla Firefox. What can be done to address this problem specifically for Mozilla browser?

After experimenting with different browser compatibility, I have discovered a way to clear all fields when clicking the "New" button. By using the code onClick="history.go(0)", the fields are successfully emptied in IE but unfortunately fail in Mozilla. ...

javascripthtmlcross-browser

The functionality of the AngularJS nested router is not functioning properly

I am encountering some challenges with Angular routing, specifically when using nested routes: The current 'abc' state works flawlessly for the route /admin/team/:teamId .state('admin', { url: '/admin', controller: & ...

javascriptangularjs

Improving Zen Coding to integrate with JavaScript files on Sublime Text2

Sublime Text2 is hands down my go-to editor, except for one minor hiccup - the Zen Coding plugin only works with CSS and HTML files. There are plenty of times where I'd love to use Zen Coding with JavaScript or other file types, like incorporating HTM ...

javascriptsublimetextemmet

"Learn how to handle exceptions in Nest JS when checking for existing users in MongoDB and creating a new user if the user does

Below is the implementation of the addUser method in users.service.ts - // Function to add a single user async addUser(createUserDTO: CreateUserDTO): Promise<User> { const newUser = await this.userModel(createUserDTO); return newUser.save() ...

javascriptnode.jsmongodbexpressnestjs

Leverage the specific child's package modules during the execution of the bundle

Project Set Up I have divided my project into 3 npm packages: root, client, and server. Each package contains the specific dependencies it requires; for example, root has build tools, client has react, and server has express. While I understand that this ...

javascriptnode.jstypescriptnpmwebpack

When access to Ajax .responseText in an alert it can be displayed, however it cannot be stored in a variable or

var response_var=""; // Added for debugging purposes ajax.onreadystatechange = function() { if (ajax.readyState == 4 & ajax.status == 200) { response_var = ajax.responseText; alert(ajax.responseText); // This alerts properly (some text ...

javascriptajaxxmlhttprequest

Leverage Angular to highlight updated items within a list

My goal is to synchronize data, so I have a data object that holds the current state. Whenever this state changes, I want to mark the object with an attribute for filtering purposes during syncing. Here is the structure of the object: data = { type1: [ ...

javascriptangularjssynchronization

Give it a little time before uploading a widget onto the page

As a newcomer to programming, I recently came across this code from an open source project. I am in the process of loading a widget onto a website. Instead of having the widget load instantly, I would like it to wait 10 seconds before displaying. Below i ...

javascripttypescript

I am looking to dynamically generate HTML elements using AngularJS based on data from a JSON file

Although there are existing answers to this question, I have a specific approach that I need help with. I've already made progress but could use some guidance. This is my Controller : angular.module('dynamicForm.home-ctrl',[]) .con ...

javascriptjqueryhtmlangularjsjson

Problem with geocoding to retrieve a list of terrestrial coordinates

I am currently working on developing a functionality that can return an array of land-based coordinates. I have utilized Google's geocoder to create individual land-based coordinates successfully, but now I want to implement it in a way where an array ...

javascript

Sending parameters from one Node.js function to another in separate JavaScript files

I am currently working on passing function responses between two Node.js scripts. Here is my approach. Index.js var express = require('express'); require('./meter'); var app = express(); app.get('/',function(req,res){ ...

javascriptjsonnode.jsfunctionexpress

Learn how to dynamically populate a select2 dropdown with values retrieved from a database using JavaScript or jQuery

I am currently working on an edit form where I need to retrieve data from a MySql database using Ajax. The form includes two select2 dropdowns and I want the fetched data to be displayed inside those dropdowns. For example: Let's say I have created a ...

javascriptjqueryajaxspring-bootjquery-select2

Tips for effectively reusing the modal component in Vue.js without encountering re-render issues

I'm encountering an issue where the same component content is being rendered despite having different components (Rendering problem). I have a reusable modal component called modal.vue, so every time I create a new component, I call the modal compone ...

javascriptvue.js

Ways to retrieve a variable from a service within a controller

I have two HTML screens. On the first screen, I am taking an input and saving it in a service so that the same value can be accessed by another controller to display on the second screen. While I am able to store the value from the first screen in the serv ...

angularjsangular-servicesangular-controller

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using "array_agg" in a "having clause" with Sequelize

I am facing a particular scenario with my database setup. I have three tables named computers, flags, and computerFlags that establish relationships between them. The structure of the computerFlags table is as follows: computerName | flagId computer1 | ...

javascripttypescriptpostgresqlsequelize.js