The property "picture" of undefined cannot be accessed

My JSON data is structured as follows:

{
  "error": false,
  "data": {
    "id": 1,
    "name": "Jagadesha NH",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de8f5ece0fde1e8cdeae0ece4e1a3eee2e0">[email protected]</a>",
    "phone": "9986XXXXXX",
    "dob": "1991-06-01",
    "gender": "m",
    "active": 1,
    "created_at": "2017-02-19 21:33:04",
    "updated_at": "2017-02-19 21:33:04",
    "profile": {
      "id": 1,
      "user_id": 1,
      "picture": "https:\/\/placehold.it\/150x150",
      "about": null,
      "occupation": null,
      "created_at": "2017-02-19 21:33:04",
      "updated_at": "2017-02-19 21:33:04"
    }
  },
  "msg": ""
}

Whenever I attempt to access the picture property, I encounter an error message that says:

cannot read property picture of undefined

The code I am using to retrieve the picture property is:

data.profile.picture
javascriptjsonvuejs2

Answer №1

Upon discovery, the code appeared as follows:

var x={
  "error": false,
  "data": {
    "id": 1,
    "name": "Jagadesha NH",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eebf6efe3fee2ebcee9e3efe7e2a0ede1e3">[email protected]</a>",
    "phone": "9986xxxxxx",
    "dob": "1904-06-01",
    "gender": "m",
    "active": 1,
    "created_at": "2017-02-19 21:33:04",
    "updated_at": "2017-02-19 21:33:04",
    "profile": {
      "id": 1,
      "user_id": 1,
      "picture": "https:\/\/placehold.it\/150x150",
      "about": null,
      "occupation": null,
      "created_at": "2017-02-19 21:33:04",
      "updated_at": "2017-02-19 21:33:04"
    }
  },
  "msg": ""
};

alert(x.data.profile.picture);

If JSON is stored in a variable, access it using the variable followed by dot (

<<variable_name>>.data.profile.picture
)

Answer №2

The reason for the error is that 'data' is being used as both a key and property within the object.

var myData = //Insert your JSON data here

    myData.data.profile.picture

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

Determine the selected value in a jQuery combobox

Hey everyone, I am trying to populate a second combobox using jQuery when the first one is already selected. However, I am struggling to get the value without changing the selection. <form> <select name="tipo" id="Tipo_Id" class="buscaTiposVe ...

phpjqueryjsonforms

Sending an HTTP post request with form data and various field controls will not be directed to a Java backend

Recently, I've started working with AngularJs and I'm facing an issue with uploading image files along with their labels through a Jax-RS post rest API. My problem is that the control in my AngularJS controller is not entering the Java post API. ...

javascriptjavaangularjsrestangularjs-scope

Is there a way to customize the color of the HR element in a Material-UI Select Field?

https://i.stack.imgur.com/DYeX7.png https://i.stack.imgur.com/CN0T6.png Hi there, I am currently working on a website and using a Select Field component from Material-UI. I am faced with the challenge of customizing the style to change the default light ...

javascriptcssreactjsmaterial-ui

Accessing class properties from JavaScript code

Can you retrieve the class values of a style element using Vue's script section? For example: .node-output02 { bottom: #{-2+$portSize/-2}px; left: #{$nodeWidth/3}px; } In the script, I'd like to achieve: const left = .node-output02. ...

javascriptvue.js

Utilizing JSON AJAX and JQUERY for Autocomplete in C# MVC

Model-View-Controller Example public class HomeController : Controller { public JsonResult UniversalSearch() { List<UniversalSearchBar> EmployeeDetails = new List<UniversalSearchBar>(); EmployeeDetai ...

c#htmljsonajaxmodel-view-controller

Using Vue.js for real-time price calculations

Currently, I'm in the process of creating a hotel booking application and focusing on the booking feature. Within this step, users are able to modify their preferred room type, number of adults, and number of children using a selection box. To clari ...

javascriptvue.jsvuejs2vue-component

Emit data asynchronously upon returning

In my node.js application, I have a background process implemented using the EventEmitter. Here is a snippet of how it is used: var event = { returnValue: undefined }; eventEmitter.emit('name', event, argument); return event.returnValue; // This ...

javascriptnode.jsasynchronous

Input user information into the Action URL

After the user clicks submit, the goal is to open . However, the giveme() function is currently returning "?keyword=UserInput" instead of just "UserInput". How can I ensure that the URL is correct? <form id="myform" class=" ...

javascriptpythonhtmlflaskurl

What methods can I leverage in VueJS to redirect users to a different page or URL?

I am new to JavaScript, so please excuse any mistakes in my code. I am working on a form that utilizes AWS SNS to send an email to my company with the data submitted through the form. The issue I'm facing is that there is no feedback for the user afte ...

javascriptvue.jsvuejs2vue-routeramazon-sns

What is the purpose of specifying http://localhost:3000 when accessing API routes in Next.js?

I created an API route within the pages directory of my NextJS project. It is functioning properly as I am able to retrieve data by directly accessing the URL like http://localhost:3000/api/tv/popular. My goal is to fetch this data using getStaticProps and ...

javascriptreactjsnext.js

Encapsulating JSON responses using a structured approach in PHP with the Laravel framework

I am currently developing a REST API that will generate diverse JSON responses based on the type of User making the request. A unique endpoint: example.com/api/v1/collect is utilized, employing Laravel's API authentication to fetch the User model wit ...

phpjsonlaravelresponselaravel-blade

Ways to organize JSON information in JavaScript

The JSON data I have is structured like this. {"count": 3, "records": [ {"common":{"review_date": "2016-02-07 07:00:00","severityid": {"value": "2", "description": "Medium"}}}, {"common":{"review_date": "2016-02-07 08:00:00","severityid": {"value": "2" ...

javascriptjson

The process of altering a span label's class with JavaScript

I am currently working with an HTML element that looks like this: <dd><span class="label label-success" id="status">Production</span></dd> My goal is to update it to: <dd><span class="label label-warning" id="status"> ...

javascriptjqueryhtmlajax

Traverse XML documents using jQuery

I'm facing a challenge with this particular issue. I have multiple XML files labeled by an ID (each XML has its own unique value). My goal is to iterate through these files and display their contents in HTML format. However, the loop starts before t ...

javascriptjqueryxmljson

Struggling with the alignment of pictures inside a container

I utilized the Instafeed.js library to fetch the three most recent images from an Instagram account. These images are loaded into a specific div and I successfully customized their styling according to my requirements. However, the current setup is quite s ...

javascripthtmlcsswordpress

Difficulty triggering an event within a collection in Backbone.js

Having recently delved into JavaScript and Backbone, I encountered a puzzling error. Router = Backbone.Router.extend({ routes: { ":albumID": "load" }, load: function (albumID) { if (controller.collectionInitialized == true) ...

javascriptjquerybackbone.js

What is the best way to save data in Next.js so that it can be accessed from any location

I am working on a Next.js application where I need to make API requests based on user inputs. To do this, I want to generate a token at the beginning of the app and whenever necessary based on user data from getServerSideProps or a similar method. After ex ...

javascriptreactjsnext.jsserver-side-rendering

I encountered an SyntaxError while working with Ionic. The error message reads: "Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)."

Here's the code that is causing me trouble: this.http.get('http://localhost/....) .map((res) => res.json()) .subscribe(( this.navCtrl.push(OtpPage,{mobileno:this.mobile}); }, (err) => { console.log(err ...

javascriptphpangularjsionic-framework

Is it possible to adjust the size of the new window based on changing requirements?

I have a setup where my JSP file is linked with a JS file. I want a new window to display a photo every time the link is clicked. Currently, everything is working fine and a new window pops up, but it has fixed width and height specifications. else if (na ...

javascript

Implementing Riot API Promises with Fetch for Ultimate Efficiency

I'm currently working on looping through 10 League of Legends matches and calling another API to retrieve the match details for each match. Here is the function I have set up: function getAllMatchData(ids) { const promises = []; _.take(ids, 1) ...

javascriptnode.jsexpresspromise