Discovering a Specific Value in a JsonObject

Question

Discovering a Specific Value in a JsonObject

I have encountered an issue with retrieving data from my Json Object as I keep getting undefined values,

{
    "status": 200,
    "message": "Task has been Retrieved",
    "employeepanel": {
        "taskno": 7,
        "taskdate": "2001-06-21",
        "createdby": "admin",
        "taskdescription": "create the product and deliever it by monday  ",
        "status": "assigned",
        "date": "2001-06-21",
        "tenure": 1,
        "employee": {
            "userId": 30,
            "userName": "xyz",
          
        }
    }
}

The objective was to find the task by id, with the API responding in this specific format. Now, I am trying to extract the userName from the response.

findbyId(event) {
    var selected_id = event.currentTarget.id
    const base_URL = 'http://localhost:8091/getbyTaskno/'+selected_id 
    this.http.get(base_URL, {
    }).subscribe(data => {
      if (data['status'] == '200' && data['message'] == 'Task has been Retrieved') {
      this.userIds=data['employeepanel.employee.userName']
     }else{
       alert("No task is present for the particular Employee")
     } })
  }

angular typescript

Answer 1

Answer №1

Consider utilizing dot notation to access your properties and sub properties:

By using dot notation, you can access this.userIds=data.employeepanel.employee.userName;

Answer 2

Consider utilizing dot notation to access your properties and sub properties:

By using dot notation, you can access this.userIds=data.employeepanel.employee.userName;

Answer 3

Answer №2

data['employeepanel.employee.userName']

is not the correct notation to access the username of an employee.

Here is a sample code snippet that demonstrates how to access the user name from a JSON object:

findbyId(event) {
    var selected_id = event.currentTarget.id;
    const base_URL = 'http://localhost:8091/getbyTaskno/'+selected_id;
    this.http.get(base_URL, {
    }).subscribe(data => {
        if (data.status === '200' && data.message === 'Task has been Retrieved') {
            this.userIds=data.employeepanel.employee.userName;
        } else {
            alert("No task is present for the particular Employee")
        }
    });
}

For a comprehensive guide on JSON syntax, you can refer to this resource.

let data = {
    "status": 200,
    "message": "Task has been Retrieved",
    "employeepanel": {
        "taskno": 7,
        "taskdate": "2001-06-21",
        "createdby": "admin",
        "taskdescription": "create the product and deliever it by monday  ",
        "status": "assigned",
        "date": "2001-06-21",
        "tenure": 1,
        "employee": {
            "userId": 30,
            "userName": "xyz",
        }
    }
};

function getEmployeeUserName() {
  console.log("data.employeepanel.employee.userName is: ", data.employeepanel.employee.userName);
}

.main {
  font-size: 20px;
}

<p class="main">Click the button to log the <code>.employeepanel.employee.userName;</code></p>
<button onclick="getEmployeeUserName()">Get Employee userName</button>

Answer 4

data['employeepanel.employee.userName']

is not the correct notation to access the username of an employee.

Here is a sample code snippet that demonstrates how to access the user name from a JSON object:

findbyId(event) {
    var selected_id = event.currentTarget.id;
    const base_URL = 'http://localhost:8091/getbyTaskno/'+selected_id;
    this.http.get(base_URL, {
    }).subscribe(data => {
        if (data.status === '200' && data.message === 'Task has been Retrieved') {
            this.userIds=data.employeepanel.employee.userName;
        } else {
            alert("No task is present for the particular Employee")
        }
    });
}

For a comprehensive guide on JSON syntax, you can refer to this resource.

let data = {
    "status": 200,
    "message": "Task has been Retrieved",
    "employeepanel": {
        "taskno": 7,
        "taskdate": "2001-06-21",
        "createdby": "admin",
        "taskdescription": "create the product and deliever it by monday  ",
        "status": "assigned",
        "date": "2001-06-21",
        "tenure": 1,
        "employee": {
            "userId": 30,
            "userName": "xyz",
        }
    }
};

function getEmployeeUserName() {
  console.log("data.employeepanel.employee.userName is: ", data.employeepanel.employee.userName);
}

.main {
  font-size: 20px;
}

<p class="main">Click the button to log the <code>.employeepanel.employee.userName;</code></p>
<button onclick="getEmployeeUserName()">Get Employee userName</button>

Discovering a Specific Value in a JsonObject

Answer №1

Answer №2

Similar questions

issue with Angular: Unable to set both minimum and maximum values in the same input field for date type

Can you please explain the distinction between the .ts and .tsx file extensions? They are both commonly used for TypeScript files in a React environment, but what is the specific use case for each

Is it advisable to switch all properties to Angular Signals?

Obtaining the dimensions of an Angular component: Height and Width

Angular type error: Attempting to assign a value of type 'string' to a variable declared as type 'string[]' is not allowed

Issue obtaining information from Firestore and presenting it visually on the screen

Struggling with the error message "Type 'ChangeEvent<unknown>' is not assignable to type 'ChangeEvent<MouseEvent>'" while working with React and TypeScript? Here's how you can tackle this issue

Error Encountered | Invalid Operation: Unable to access attributes of undefined (referencing 'CodeMirror')

When I attempt to run 'ionic cordova build android --prod', I am receiving the following warnings

Displaying text on a ribbon in Excel using Office JavaScript

What is the best way to arrange items by utilizing the Array index in JavaScript?

In order to use the serve command, it is necessary to run it within an Angular project. However, if a project definition cannot be located

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

The HTTP request is failing to transmit cookies

Identify the general type according to a boolean property for a React element

Auth.logout() callback in AngularFire 2

Sources of the TypeScript library in WebStorm

When working with Laravel and submitting a form using the `multipart/form-data` encoding type, you may encounter the

Parent variable in Angular Type Script causing undefined error

A comprehensive guide on constructing a literal object in Typescript by combining an array with an object