I am facing an issue where I am unable to view JSON objects despite utilizing json2html library

Currently, I am facing a minor problem while trying to incorporate json2html into a project. Despite running the transform function successfully, it is not including the JSON objects as expected.

In my setup, I execute a call to MongoDB, retrieving the JSON data in string format. This string is then passed into a variable called "data", which is further passed into json2html.transform(data, transform) along with my transform code.

Let me provide you with an example of my transform code:

transform =[

{"tag":"html","children":[
    {"tag":"body","children":[
                     {"tag":"p","html":"First Name: ${firstName}"},
         {"tag":"p","html":"Last Name: ${lastName}"},
            ]}
    ]}

];

...and this is the corresponding JSON data received from MongoDB...

{ biographicData: { firstName: 'John', lastName: 'Doe', birthDate: '10/15/1983', email: '[email protected]', workPhone: '678-901-2345', mobilePhone: '098-765-4321', homePhone: '123-456-7890' } }

...however, when I view the resulting HTML, it appears like this:

First Name:

Last Name:

The JSON objects seem to be missing. Do you have any idea what might be causing this issue?

Answer №1

Tom was correct .. ${biographicData.whatever} should have resolved the problem. Give this code snippet a try, it will definitely work:

var information = { biographicData: { firstName: 'John', lastName: 'Doe', birthDate: '10/15/1983', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1cbcec9cfc5cec4e1c6ccc0c8cd8fc2cecc">[email protected]</a>', workPhone: '678-901-2345', mobilePhone: '098-765-4321', homePhone: '123-456-7890' } };

var structure = {"tag":"html","children":[
    {"tag":"body","children":[
                     {"tag":"p","html":"First Name: ${biographicData.firstName}"},
         {"tag":"p","html":"Last Name: ${biographicData.lastName}"},
            ]}
    ]};

document.write(json2html.transform(information,structure));

However, I suggest that you exclude the html & body tags from the transform and instead add them directly in the HTML file itself. This way, you can pass an array of values like this:

var information = [{ biographicData: { firstName: 'John', lastName: 'Doe', birthDate: '10/15/1983', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f79d989f99939892b7909a969e9bd994989a">[email protected]</a>', workPhone: '678-901-2345', mobilePhone: '098-765-4321', homePhone: '123-456-7890' } }];

    var structure = [
             {"tag":"p","html":"First Name: ${biographicData.firstName}"},
             {"tag":"p","html":"Last Name: ${biographicData.lastName}"},   
     ];

    document.write(json2html.transform(information,structure));

Otherwise, your resulting HTML will contain multiple html & head tags.

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

Creating snake_case format for definitions in swagger.json within Dropwizard

I am currently working with the dropwizard framework on a project where I have implemented the @JsonSnakeCase annotation to convert CamelCase format to snake_case. However, when I attempt to generate swagger.json using swagger annotations, the definitions ...

Utilize Python to extract JSON data from a CURL response

I need to extract the value of the id, which is "id": 59 from a JSON output obtained using curl command. The JSON output looks like this: [{"id":59,"description":"This is a demo project","name":"Demo_Project","name_with_namespace":"sam / Demo_Project","pa ...

"Combining Node.js, MongoDB, and Vue.js to create a dynamic dependent select dropdown: a step-by-step

Seeking guidance on setting up a dynamic dependent dropdown list using node js, mongoDB and Vue js. As a newcomer to this concept, I'm unsure where to begin. Here is the scenario I am facing: I need assistance in creating 2 dropdown menus for country ...

I am struggling to figure out the best way to save JSON data retrieved from an API request in a Node.js Express server, and then efficiently send it to a React Native client

My Node.js server is up and running with an app.js file structured like this: var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-pars ...

What is the proper way to display the complete result of aggregating each outcome from the previous iteration within two nested queries in an array using NodeJS and Mongoose?

As a newcomer to both Stackoverflow and NodeJS/Mongoose, I apologize if I make any mistakes or break any rules. Thank you in advance. I'm looking for a function that can return all nearby products based on my current location, which is provided by th ...

Setting up a Node + MongoDB API in the Cloud on either AWS or GCP

Currently, I am developing a Node.js + MongoDB API that is hosted on a virtual machine on Google Cloud Platform. The data for the API is stored in a MongoDB instance running on the same VM. I am wondering if it is advisable to run a local MongoDB instance ...

Utilize the JavaScript .send function to pass an array

Can an array be passed to a PHP page using the code below? If not, what modifications are needed in the code? function ajax_post(){ var hr = new XMLHttpRequest(); hr.open("POST", "get_numbers.php", true); hr.setRequestHeader("Content-type", "a ...

Exploring a JSON Object with nested properties, crafting changes, and producing a fresh object: A step-by-step guide

I am attempting to manipulate a JSON object with nested properties by replacing numeric values with computed values and returning a new object. The original object looks like this: var obj = { "a0": { "count": 41, "name": "Park", "new": { ...

Discover the power of Snowflake's lateral flatten function in exploding multiple JSON values within nested JSON lists!

I have a variant table containing 24 JSONs that look like the following (one per row): { "context": "marketplace", "metadata": { "app_version": "1.0.4 (166)", }, "params": { " ...

The signin callback in NextAuth doesn't seem to be activating as expected

I recently integrated the Google provider into my next js project using next auth and mongoDb. When a user signs in with Google, various fields like {name, email, id , image, emailVerified} are automatically saved to the users collection in the database an ...

Step-by-step guide for importing a JSON file in React typescript using Template literal

I am facing an error while using a Template literal in React TypeScript to import a JSON file. export interface IData { BASE_PRICE: number; TIER: string; LIST_PRICE_MIN: number; LIST_PRICE_MAX: number; DISCOUNT_PART_NUM: Discout; } type Discoun ...

Tips for importing a .geojson document in TypeScript using webpack?

I am trying to extract data from a .geojson file but faced some challenges while attempting two different methods: const geojson = require('../../assets/mygeojson.geojson'); The first method resulted in an error message stating: Module parse f ...

Using Angular's ng-repeat to iterate through an array and display its objects within another array

One of my tasks involves retrieving json objects through a simple post method. The json contains multiple campaigns, organized in an array structure. Each campaign holds slots, which are also arrays with one or more base_image elements. My goal is to di ...

Storing an image in MongoDB using Multer as a file from Angular is not working as anticipated

I'm currently dealing with an issue that I believe is not functioning correctly. I installed a library in Angular called cropper.js from https://github.com/matheusdavidson/angular-cropperjs. The frontend code provided by the developer utilizes this li ...

$.ajax causing a JSON input string malfunction

My web API requires the following JSON format for input: [{ "atrSpaUserId": "47fe8af8-0435-401e-9ac2-1586c8d169fe", "atrSpaClassLegendId": "00D18EECC47E7DF44200011302", "atrSpaCityDistrictId": "144d0d78-c8eb-48a7-9afb-fceddd55622c"}, { "atrSpaUserId": "47 ...

Swagger codegen static documentation with a customized moustache template specifically designed for response messages

I am utilizing swagger-codegen to create static documentation pages. The generated docs are based on Mustache templates that are part of the project. When I run the code with a sample JSON from the Wordnik Swagger API, it creates individual files for eac ...

The world of visual content and data interchange: AS3 graphics

Prior to this, I inquired about action script 3 Json request However, my main query is centered around transforming an image into a JSON object. Any suggestions? Thanks! ...

Calling an ajax request to view a JSON pyramid structure

My experience with ajax is limited, so I would appreciate detailed answers. I have a Pyramid application where I need to load information via ajax instead of pre-loading it due to feasibility issues. I want to retrieve the necessary information through a ...

While attempting to send data to mongodb, I encountered the 'MongoNotConnectedError' and had trouble proceeding

Even though I am able to retrieve the products when I log the const products variable, I am encountering issues when attempting to insert data into my MongoDB database. The error message states that mongoClient is not connected. const express = require("ex ...

Set an array to a JSON object as a fresh entity

My challenge involves working with an array that contains certain values. let myArray = [value1, value2]; I am looking to generate a JSON object in the format shown below: { "field": "[value1, value2]" } ...