Exploring Angular2: Understanding how to retrieve an object with an unknown key

Question

Exploring Angular2: Understanding how to retrieve an object with an unknown key

I am trying to showcase a specific value from different objects within a template. The path of the desired value depends on the object being referenced.

For example:

let obj = {
    "a": "a",
    "b": {
       "1": "1",
       "2": "READ ME"
    }
}

let obj2 = {
    "x": "x",
    "y": {
       "foo": "1",
       "bar": {
           "test": "READ ME"
       }
    }
}

In this scenario, I aim to access the value "READ ME" using expressions like obj.b.2 or obj['b']['2'] for the first object. However, since I don't always know the location of the "READ ME" value in different objects.

To pinpoint the location of the value to display, I provide my template with a configuration array containing the keys needed to access it. For instance:

config = ['b', '2'] // For the first object
config = ['y', 'bar', 'test'] // For the second object

How can I effectively display "READ ME" in my template using the specified list of keys?

javascript angular typescript

Answer 1

Answer №1

To retrieve the value, utilize the reduce function. As functions cannot be defined within templates, the logic must be implemented in the component.

Template

{{config.reduce(reduceValue, obj)}}

Component

function reduceValue(object, property){
    return object ? object[property] : null;
}

Live Demo

Answer 2

To retrieve the value, utilize the reduce function. As functions cannot be defined within templates, the logic must be implemented in the component.

Template

{{config.reduce(reduceValue, obj)}}

Component

function reduceValue(object, property){
    return object ? object[property] : null;
}

Live Demo

Answer 3

Answer №2

Instead of directly binding to an array or object, try binding to a "getter" function.

<div>{{ fetchCorrectValue() }}</div>

In your controller:

fetchCorrectValue() {
   // Test objects and determine the correct value...
   return theDesiredValue;
}

You can use other logic in your controller to help decide what the correct value should be. For example, you might receive objects from a service and need to perform tests before setting the "theDesiredValue". You can accomplish this using a setter:

set theRightValue() {
  // Perform necessary logic...
  theDesiredValue = something else.
}

This approach allows you to bind to results from various data structures by inspecting them, setting up required values, and returning them through the getter.

Answer 4

Instead of directly binding to an array or object, try binding to a "getter" function.

<div>{{ fetchCorrectValue() }}</div>

In your controller:

fetchCorrectValue() {
   // Test objects and determine the correct value...
   return theDesiredValue;
}

You can use other logic in your controller to help decide what the correct value should be. For example, you might receive objects from a service and need to perform tests before setting the "theDesiredValue". You can accomplish this using a setter:

set theRightValue() {
  // Perform necessary logic...
  theDesiredValue = something else.
}

This approach allows you to bind to results from various data structures by inspecting them, setting up required values, and returning them through the getter.

Exploring Angular2: Understanding how to retrieve an object with an unknown key

Answer №1

Template

Component

Live Demo

Answer №2

Similar questions

`Localhost JSON parsing works fine, but encounters issues on the server``

When clicking initially, the default input value in an Angular 2 form does not get set

Is there a way to execute a PHP script using Ajax without needing any return values?

Send a JavaScript object to an MVC controller using an HTTP POST request

Utilizing the options object within JavaScript functions: A step-by-step guide

Managing the back button in Nativescript-Angular to toggle visibility

Why does the getter consistently generate the previous value?

An issue has arisen regarding the type definition for the random-string module

Discover the steps to implement user authentication with a combination of username, password, and token in an Angular 4

Looping through a dropdown list to pass its items into an iframe

The jQuery replacement should only be implemented on the new select box and not on the previous one

`Can you provide instructions on modifying CSS using JavaScript once the window size reaches a specified threshold?`

Is it a common issue for links to not work on the first click after ajax loads the page?

Navigating through a HTML email Listserv with a click event scrolling feature

Building a Laravel PHP application that dynamically generates a custom JSON object fetched from the database and passes it from PHP to

AJAX issue: "Content-Type header is missing the multipart boundary parameter"

What is the best way to retrieve the JSON data from a POST request made through AJAX to a PHP file and save it in an array variable?

Specifying the type of "this" within the function body

Can an identification be included in a label element?

Inject various JavaScript data into different div containers