When working with nested objects using dot notation, it can be tedious to constantly check if each previous object exists.
I'm looking for a solution that avoids lengthy if chains like
if (a && a.b && a.b.c && a.b.c[0] ... ) { v = a.b.c[0]; }
The only alternative I've considered is using try catch blocks.
var v; try { v = a.b.c[0].d.e; } catch (e) {}
Is there a more effective pattern to handle this situation?
I believe you have already found the most elegant solutions.
However, it is important to note that in cases like obj.obj.string.length, your initial solution may not work if string === "". An empty string evaluates to false, triggering the && guard.
When it comes to handling strings, you could consider a method like this:
function getNestedProperty(obj, propChain) {
var props = propChain.slice(0), prop = props.shift();
if(typeof obj[prop] !== "undefined") {
if(props.length) {
return getNestedProperty(obj[prop], props);
} else {
return obj[prop];
}
}
}
var v = getNestedProperty(a, ["b", "c", 0, "d", "e"]);
Not the most aesthetically pleasing solution, I must admit :P
Out of all the options presented, using try...catch might just be the simplest approach.
Here's an interesting snippet for you to consider:
const checkNestedProperty = function (obj, prop) {
const properties = prop.split('.'),
temporary = obj;
while (temporary && properties.length) {
temporary = temporary[properties.shift()];
}
return !!temporary;
};
You can then implement it in your code like this:
if (data && checkNestedProperty(data, 'info.details.1')) { result = data.info.details[1]; }
The concept mentioned in your inquiry is commonly known as "optional chaining." Some programming languages like C# have already incorporated this feature, referred to as null-conditional operators, allowing for efficient expression short-circuiting:
var count = customers?[0]?.Orders?.Count();
Regrettably, optional chaining is not yet part of the current JavaScript specifications.
A Stage 1 proposal for optional chaining is under consideration and can be monitored through this link.
If implemented, you could simplify code snippets like...
a?.b[3].c?.(x).d
...instead of the longer alternative:
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d
If you are willing to explore this feature at its early stage, consider using Babel plugin for optional chaining to integrate it into your project.
This solution may not be ideal, but it is effective and doesn't appear too messy:
var i = !a ? null : !a.b ? null : !a.b.c ? null : !a.b.c.d ? a.b.c.d.e;
The usage of ! serves to reverse the test flag in order to have the successful outcome as the final expression within the ?:. This allows for the chaining of conditions in this manner.
It is advisable to verify the operator precedence if implementing this technique seriously (I conducted some basic tests which seem accurate). Also, be prepared for some amusement from others if they come across this unconventional code in your program.
I send the object to the backend (Node js) when making an API call, but I am logging the objects for verification. Initially, I used POSTMAN to check and it worked perfectly. However, when attempting to pass an object in the frontend (Reactjs), it appear ...
In my express.js application, I'm currently using supertest and should.js as my preferred testing framework. However, I've encountered some difficulties when it comes to testing for specific values within an unordered array. After referring to t ...
Is there a method to dynamically load JS files before "$(document).ready" is triggered, while still having them available in the ready event handler? Is there a feature in jQuery that allows for this process? The challenge I am facing involves loading di ...
Looking to incorporate Electron, Preload, Renderer with ReactJS and TypeScript into my project. <index.html> <body> <div id="root" /> <script src='./renderer.js'/> </body> <index.ts> const root = Re ...
How can I simplify this code? Ensure that the button also updates the localValue of the child component. Vue.component('my-input', { template: ` <div> <b>My Input:</b> <br> localValue: {{ localValue } ...
I stumbled upon a helpful post outlining how to incorporate NPM modules in Deno: How to use npm module in DENO? The catch is, the libraries used in the example have absolutely no dependencies. But what if I want to utilize a dependency like Axios (not th ...
Is there an on-the-fly URL shortener similar to Tweetdeck available? I have come across several jQuery and JavaScript plugins that can shorten a URL through services like bit.ly when a button is clicked. However, I am looking for one that shortens URLs aut ...
I am facing an issue in my factory where I want to return a promise inside a function, but every time I try, my controller throws an error like: Provider 'personFactory' must return a value from $get factory method. This is how my factory looks ...
As I use Selenium to log in and send messages on a specific website, I am faced with a cookie popup that appears each time. Unfortunately, clicking the accept button to proceed seems to be quite challenging for me. Here is an image of the cookie popup Th ...
I'm facing an issue where the data I'm trying to fetch using an API is not initially loading in my datagrid. I can retrieve the data successfully, but for some reason, it doesn't show up in the datagrid. The setup involves a common function ...
My goal is to arrange my array of objects with date values in descending and ascending order. Here is the code I am using: function comp(a, b) { return new Date(a.jsDate) - new Date(b.jsDate); } function compNewestFirst(a, b) { return new Date(b.jsD ...
When I map data in the returned render, can I then perform a conditional check on that mapped data? export default function App() { const prod = [ {'name': '1'}, {'name': '2'}, {'name': ' ...
Currently, I have an array that needs to be mapped. Inside the mapping function, there is an asynchronous function being called, which conducts an asynchronous request and returns a promise using request-promise. My intention was for the first item in the ...
In my Django model, I have two fields for latitude and longitude which are both declared as CharField. The model needs to accept multiple coordinates, so in the UI form, I enter these coordinates separated by commas. I then split this char input in a funct ...
Starting off, I want to mention that my approach may not be the most efficient. As a novice in JavaScript and PHP, I am aware that there are better and simpler ways to achieve what I'm attempting. The issue seems to be related to session variables an ...
I am currently experimenting with a HowlerJS playlist code and would like to create a button that can detect if a specific song in the playlist is playing. When this button is clicked, I want it to hide a certain line of text. However, my knowledge on this ...
I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...
<script> function greet() { alert("hello"); } </script> <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="greet()"></iframe> .Kindly assist me, please. ...
function ButtonIncrement(){ const [count,setCount] = useState(0); render(){ <div> <h3> <button onClick={() => setCount(count+1)}>Increase count for amusement</button> <p>Total C ...
Struggling with basic Express routing here. I want the server to render 'layout2.hbs' when accessing '/1', but all I'm getting is a 304 in the console. Here's the error message: GET / 304 30.902 ms - - GET /style.css 304 3.3 ...