Having trouble retrieving values from JSON properties

My mind is boggled by this issue, and I have a feeling it's just a simple oversight!

I'm dealing with a service that sends back a JSON object:

[{"accountId":"0000004000006195","title":null,"firstName":"JOE","middleName":"BLOG","lastName":"BLOGGS","suffix":null,"primaryAddress":{"addressLine1":"TEST ADDRESS CLOSE","addressLine2":null,"addressLine3":"MY TOWN","town":"Washington","county":null,"country":"US","postcode":"PO9868"},"customerTelephones":[{"phoneNumber":"09876543455","type":"Alternate 1"},{"phoneNumber":"98654345676","type":"Alternate 2"}],"birthDate":108628400000}]

I'm attempting to display certain properties of the JSON, like first name using:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.testJson = [{"accountId":"0000004000006195","title":null,"firstName":"JOE","middleName":"BLOG","lastName":"BLOGGS","suffix":null,"primaryAddress":{"addressLine1":"TEST ADDRESS CLOSE","addressLine2":null,"addressLine3":"MY TOWN","town":"Washington","county":null,"country":"US","postcode":"PO9868"},"customerTelephones":[{"phoneNumber":"09876543455","type":"Alternate 1"},{"phoneNumber":"98654345676","type":"Alternate 2"}],"birthDate":108628400000}]
});

HTML:

<p>{{testJson}}</p>

<p>{{testJson.firstName}}</p>

However, inexplicably, {{testJson.firstName}} appears blank!

Check out this Plunker for reference: http://plnkr.co/edit/VWJfcXTPaDut2jqB4W3o?p=preview

Any insights on what might be causing this issue?

javascriptjsonangularjsangularjs-scope

Answer №1

$scope.testJson is of type Array, so you can access elements by index and then retrieve properties using Object

{{testJson[0].firstName}}

Example

Answer №2

It appears that your testJson is an array. To retrieve the first name, you can use {{testJson[0].firstName}}.

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

Grails 3.1.9 does not support displaying JavaScript

Having trouble getting the datepicker to display using JavaScript <script> $( "#invoiceDate" ).datepicker({ inline: true, dateFormat: "yy-mm-dd", onSelect: function(datetext){ datetext = datetext+" 00:00:00.0" ...

javascriptajaxgrailsgsp

Encountering an Issue when Updating Rails Model with JSON Data

Having trouble updating a Rails model due to data handling errors despite successful ajax request. The sent parameters are: Parameters: {"{\"slot_allocation\":{\"timeslot_id\":\"3\",\"subject_id\":\"3\",& ...

ruby-on-railsruby-on-rails-3jsonjqueryruby-on-rails-3.2

The JSON output seems to be missing from the logcat display

Currently, I am undertaking an online course to learn Android Studio, and I have encountered a problem. The issue arises while developing a weather application utilizing James Smith's Android Asynchronous Http Client dependency. Despite implementing v ...

javaandroidjsonandroid-studiolocation

Issue with process.env.NODE_ENV not functioning appropriately in NodeJS when utilizing package.json scripts

I currently have three separate databases configured for testing, development, and production purposes. My goal now is to make my express app switch between these databases based on the script that is being executed. These are the scripts I am using: "s ...

javascriptnode.js

The mechanism for transferring data from the server to the client using JavaScript is malfunctioning

In my webform, I have a fileupload control and a button. When the button is clicked after selecting a file to upload, the image should be saved and renamed with a unique GUID. protected void btnUpload_Click(object sender, EventArgs e) { string fileNam ...

javascriptasp.nethidden-field

Assign a property to an array of objects depending on the presence of a value in a separate array

Looking to manipulate arrays? Here's a task for you: const arrayToCheck = ['a', 'b', 'c', 'd']; We have the main array as follows: const mainArray = [ {name:'alex', code: 'c'}, ...

javascripttypescriptecmascript-6

Guide to deserializing a collection of interfaces within a child element

My ASP.NET MVC2 application features a complex object structure as outlined below: public class IDealer { string Name { get; set; } List<IVehicle> Vehicles { get; set; } } public class DealerImpl { public string Name { get; set; } public Li ...

jsonasp.net-mvc-2serializationjson.net

The test does not pass when attempting to use a shorthand operator to ascertain the truthfulness of

I've encountered an interesting issue with my unit test. It seems to work perfectly fine when I directly return true or false, but fails when I try to use a shorthand method to determine the result. Let's say I have a function called isMatched w ...

javascriptnode.jsunit-testingjestjs

When using the jQuery datepicker with the minDate set to 0, any past dates entered in the text box will be automatically reset to the current date

How can I prevent users from selecting past dates in a jQuery datepicker, while keeping any existing past dates displayed as is? My current code looks like this: $("#t1").datepicker({ minDate:0 }); And the text box code is, <input type="t1" va ...

javascriptjquerydatepicker

How does the function window.open determine whether to open a new tab or switch to an existing tab based on specific criteria?

As I navigate through new tabs and existing tabs, I am curious about the criteria that determines whether a new tab is opened or if the browser simply reopens an existing tab with the same name. Could someone shed light on the specific parameters being co ...

javascriptjqueryhtmltabs

The URL does not contain the complete hash

I'm currently working on a gallery using Jquery Elastislide. var imageIndex = 0; if (window.location.hash) { var imageIndexStr = window.location.hash.replace('#',''); // removing # imageIndex = parseInt(imageIndexStr, 0) ...

javascriptjqueryurlhashresponsive-design

This function does not have the capability to save cookies

I am attempting to create and retrieve a cookie using JavaScript. Despite running the code below in Google Chrome, the cookie does not persist after page reload. Here is my code: <html> <title> Cookies </title> <b ...

javascripthtmlcookies

Display a page with sections that have opacity applied, identified by the hashtag #section, and utilize JavaScript to automatically scroll to the top of

Check out my app at . I'm working on overriding the scroll bar behavior in CSS to keep the entire app visible, including the logo, header, and controls, as users navigate through different sections. However, I seem to be having trouble with the CSS as ...

javascriptcss

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create: I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. ...

javascriptcssreactjsflexbox

Finding the Row Number of an HTML Table by Clicking on the Table - Utilizing JQuery

Seeking assistance to tackle this issue. I currently have an HTML table with a clickable event that triggers a dialog box. My goal is to also retrieve the index of the row that was clicked, but the current output is not what I anticipated. //script for the ...

javascripthtmljquery-uijquery-events

Storing Data with expressjs/session in NodeJS

My development project involves 3 files: app.js, index.js (routes), and Users.js (controller). Upon successful user login (verification between POST data and the database), I aim to store information in a session using expressjs/session. Below is how I c ...

javascriptnode.jssessionexpressrequest

What is the method for arranging objects in AngularJS using a custom sorting sequence?

I would like to display an array of object's properties in a custom sorted order. Here is the initial array: $scope.weekDays = [ { "day" : "TUESDAY", "count": 10 }, { ...

javascriptangularjssorting

What steps do I need to follow in order to perform a particle design simulation on my laptop

Recently, I attempted to utilize some of the particle designs featured on this website https://speckyboy.com/particle-animation-code-snippets/, but encountered difficulties. I have included both the stylesheet and javascript files, yet the design does not ...

javascripthtmlcss

Inverting the order of vertices in a THREE.js face

I am seeking a way to reverse the order of vertices in faces within my geometry. For instance: // create geometry var geometry = new THREE.Geometry(); // create vertices geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) ); geometry.vertices.push( ...

javascriptthree.js

Using CDN to load the STLLoader in Three.js

After deciding to have some fun by creating an STL loader, I've hit a roadblock. Despite trying various solutions found online, I'm still facing issues, mainly due to CDN errors. Currently, I'm following the tutorial on the Three.js site and ...

javascriptthree.js