The JSON element is failing to render

I recently started using ejs and encountered an issue with my input tag:

<input class="form-control" id="inputName" type="text" <% { %>value='<%= JSON.stringify(result.firstname) %>'<% } %>

When I try to print the data, it shows up empty.

However, when I change the value to:

<input class="form-control" id="inputName" type="text" <% { %>value='<%= JSON.stringify(result) %>'<% } %>

It displays the entire JSON data like this:

[{"userid":526,"firstname":"asdw","lastname":null,"username":"aasdasd","password":"sadadsadsadasda","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="620311060311044c0f220311064c010d0f">[email protected]</a>","contact":null}]

What mistake am I making here?

javascriptexpressnodesejs

Answer №1

If your JSON object is in array format, you can retrieve the first element's 'firstname' property by using: 

JSON.stringify(result[0].firstname)
.

In order to receive a JSON object that is not an array, it may be necessary to make some adjustments on the backend side.

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

In Pure JavaScript, an HTML element is added every time the click event is triggered

Hey everyone, I'm facing a small issue and I could use some help fixing it. I need to implement an onclick event that adds HTML code every time it's clicked. I am hesitant to use innerHTML due to its potential risks. Here is the code snippet: bu ...

javascripthtml

Every time I attempt to build a React application, I encounter the same error message. I even checked the log file, but it keeps showing the proxy error

An error occurred in the command prompt while installing packages. This process may take a few minutes. Installing react, react-dom, and react-scripts with cra-template... Error: ERR_SOCKET_TIMEOUT The network encountered a socket timeout while trying to ...

javascriptnode.jsreactjsnpmproxy

Implementing Object.somefunction() in ngFor with Angular

In my Angular project, I am using an ngFor loop to iterate over keys generated by Object.keys() in the following code snippet: <ul id='nav-tablist' class='tabrows'> <li *ngFor="let tab of obj.keys(tabList)"> ...

javascriptangular

Can Firebase lists be reversed?

I have searched extensively on SO for an answer to this question, but I haven't found a solution yet. Therefore, please do not mark this as a duplicate. Currently, I am working with AngularFire in Angular 2 and Typescript. I am using FirebaseListObse ...

javascriptangularjsfirebasefirebase-realtime-databaseangularfire

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Recently, we have started incorporating styles into our React components using the makeStyles hook from Material-UI. Instead of traditional CSS, we are now using JavaScript objects to define styles. An example of this is shown below: const useStyles = ma ...

javascriptcssreactjsmaterial-ui

Teach Google Bot how to recognize AJAX content

I'm facing a major issue while developing a website for someone else. The problem lies in the modals that are supposed to open when a user clicks on a product. My goal is to ensure that Google Bot recognizes these modals as individual pages. When a mo ...

javascriptphpajaxmodal-dialogseo

The server is unreachable due to a connection error

I encountered a server error with code ECONNREFUSED. While my API functions perfectly on my local machine, I face connection issues when trying to host the code. If you directly access the URL, you will find products at . Here is the API URL used to acces ...

node.jsexpress

Strategies for navigating dynamic references in Angular 2 components

I am working with elements inside an ngFor loop. Each element is given a reference like #f{{floor}}b. The variable floor is used for this reference. My goal is to pass these elements to a function. Here is the code snippet: <button #f{{floor}}b (click) ...

javascriptangulartypescript

Having trouble implementing a custom font family in a React Native Text component

Struggling to integrate a custom font into my react native app, I've gone through various solutions from SO and Google but nothing seems to work. I attempted to inform react native about the font by adding "rnpm": { "assets": [ "./assets/fonts/" ...

javascriptreactjsreact-nativefontsexpo

The localStorage API (getItem/setItem) is not supported with setTimeout

I find it fascinating how these two codes exhibit different behaviors. It's interesting to note that functions like 'console.log' would work in both scenarios, but localStorage API functions such as getItem and setItem do not. setTimeout(()= ...

javascriptsettimeout

Utilizing Cascading Templates with mustache-express

My plan is to create a page layout template and a form template. In the route handler, I intended to parse the inner form template and inject it into the main layout before returning it. After encountering several unexpected turns, I managed to utilize th ...

node.jsexpressmustache

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

javascriptjquerycssajax

Unable to retrieve the form from the website

My goal is to extract the login form from: Although I can see the form element when inspecting in Chrome, I'm encountering difficulties retrieving it using the jaunt API in Java. userAgent = new UserAgent(); userAgent.visit("https://etoro.com/login" ...

javascripthtmljaunt-api

What are some effective ways of using the parent, before, and children selectors?

<table> <tr><td><input type="text" value="123"></td><td><input class="here" type="text"></td></tr> <tr><td><input type="text" value="333"></td><td><input class=" ...

javascriptjqueryhtml

Encountering an error in testing with Typescript, Express, Mocha, and Chai

After successfully creating my first server using Express in TypeScript, I decided to test the routes in the app. import app from './Server' const server = app.listen(8080, '0.0.0.0', () => { console.log("Server is listening on ...

typescriptexpressmocha.jschaichai-http

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

javascriptjqueryhtmlcssiframe

Utilize axios-cache-interceptor to enforce caching of responses from axios

Is it possible to configure axios to always return a cached response with the help of axios-cache-interceptor? import axios from 'axios' import { setupCache } from 'axios-cache-interceptor' const axiosInstance = axios.create({ timeou ...

javascriptreactjsvue.jscachingaxios

Employing an array for transmitting parameters to a function

I am wondering about the structure of my code which includes variables x_1, x_2, x_3, …., x_n being passed in an array. Here is how it looks: var x_1 = "something"; var x_2 = "something"; var x_3 = "something"; . . . var x_n = "something"; var parameter ...

javascriptarraysarguments

Establishing a connection to a MongoDB database from a ZEIT Now-deployed application

An issue has arisen with my application deployed on Zeit Now using ExpressJS. The connection to MongoDB via Mongoose is displaying a state of 2 ('connecting') when accessed through mongoose.connection.readyState. Interestingly, the application f ...

node.jsmongodbexpressmongoosevercel

What is the method for documenting the on:input event triggered by the HTML Input element in Svelte using JSDoc?

When I try to define an event that I receive from a Svelte-managed input element, TypeScript informs me that my JSDoc type does not match what I receive from the on:input. On my page, I have an input field with the following handler: <input id="des ...

javascripttypescriptsveltejsdoc