Ng2-smart-table: Utilizing Angular 2 for Efficient Data Organization with Identically Named Columns

Here is a snippet of code where I am trying to display columns from a table:

           products: {
                title: 'Prodotto',
                filter: false,
                class: "colonneTabella",
                width: "15%",
                valuePrepareFunction: (products) => { 
                    var output ="";
                    var outputs = "";
                    products.forEach(function(item){
                        output = item.productDescription

                       /* item.variantList.forEach(function(d){
                           outputs=  d.description;
                        })*/

                    })
                    return output+outputs;


                }
            },
            products: {
                title: 'Variante',
                filter: false,
                class: "colonneTabella",
                width: "20%",
                valuePrepareFunction: (variants) => 
                       variants.forEach(function(variant){
                            variant.variantList;
                            variant.variantList.forEach(function(d){
                            outputs=  d.description;
                       })
                        return outputs;
                    })
            }

Hello everyone! I'm facing an issue with ng2 smart table where I need to extract data from a JSON starting from the "products" key. The problem arises when I try to name a column "product.variantList" as it does not allow dots in the name. Any suggestions or solutions would be greatly appreciated. Thank you!

Answer №1

There was a recurring issue reported where the code malfunctions if a dash ("-") is incorporated in the key. The same remedy will be relevant when a dot (".") is present in the key.

For more information, see - Reading out JSON using JavaScript

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

How can I show an ASP label using JavaScript?

In order to display my label when a user leaves out a field before clicking the button, I have set up this code. However, nothing happens when I click the button. What am I missing? <asp:Label ID="lblError" runat="server" Text="* Please complete all m ...

Is there a built-in way to update a Django template from the server side in response to an event?

As a novice Django developer, my task is to create an auction website. I need to enhance the template that displays item listings and bids, ensuring that the latest bids are updated in real-time without the need for users to refresh the page. While consid ...

What is the best way to continuously compare two date variables every minute using Javascript?

In my script, I have two date variables - one representing the current time and the other two minutes later. My goal is to compare both values every minute and trigger a function when the current time is greater than or equal to the latter time. Unfortun ...

There was a problem locating the animation entry named "routeAnimation" within the app: [ERROR ->]<app></app>. This issue occurred at Directive e within the e_Host@0:0

I'm currently working on implementing animations during route changes. Here is my code snippet: @Component({ selector: 'app', encapsulation: ViewEncapsulation.None, styleUrls: [ './app.css' ], template: totTemplate, ...

Utilizing gRPC, Bazel, and Envoy Json Proxy for seamless integration: Quick guide on importing google/api/annotations.proto

My gRPC Service definition is quite straightforward: syntax = "proto3"; package helloworld; import "annotations.proto"; // Definition of the greeting service. service Greeter { // Sends a greeting rpc SayHello(HelloRequest) returns (HelloReply) { ...

How do we handle parent elements of clicked elements using Javascript event delegation?

http://jsfiddle.net/walkerneo/QqkkA/ In the realm of Javascript event delegation, there are many discussions related to using it for elements that serve as targets for click events. However, a less explored topic is how to implement event delegation for e ...

Issue arising with Iframe failing to load content on subsequent attempts

I have a situation where I am rendering a partial view through ajax into an iframe within the main view. It works perfectly fine when testing locally, but after publishing it only works the first time and on the second attempt, it clears the body of the if ...

Efficient approach for combining list elements

I have a collection of content blocks structured like this: interface Content{ type: string, content: string | string[] } const content: Content[] = [ { type: "heading" content: "whatever" }, { type: "para&quo ...

I am having difficulty interpreting the StringIO object produced by json.dump()

I am attempting to store a collection of dictionaries in a StringIO object using the json.dump() method in Python 3. The goal is to generate a pandas dataframe from a JSON "file" without saving it to disk. However, I am encountering an issue where I cannot ...

Include a character in a tube using Angular

Hey everyone, I have a pipe that currently returns each word with the first letter uppercase and the rest lowercase. It also removes any non-English characters from the value. I'm trying to figure out how to add the ':' character so it will ...

Having trouble with Angular 2 @input binding?

Parent module: import {NgModule} from '@angular/core'; import {SharedModule} from "app/shared/shared.module.ts"; import {HeaderComponent} from './header.component'; import {UserinfoComponent} from './userinfo.component'; imp ...

Ways to prevent label rotation in Ant Design's Donut Chart

How can I adjust the labels in the ant design donut chart to be parallel to the X-axis instead of rotating? const config = { legend: { position: labelPosition }, appendPadding: 10, data, angleField: "value", colorField: " ...

utilizing routerLinks to transfer data and trigger a specific function

I'm having trouble passing data through the routerLink and calling the function(). It doesn't seem to be working as expected. Here's an example of my code and you can view a working demo on StackBlitz. First Component(HTML) <span [route ...

Learn how to create a unique API URL for your agent in Dialogflow (formerly api.ai) and implement it in PHP to save user inputs in a MySQL database

I am looking for guidance on integrating the user input from my Dialogflow agent into a MySQL Database using PHP. Specifically, I need assistance in generating the public API URL for my agent and utilizing it to obtain JSON data for storage in the database ...

Leveraging CSS Modules alongside external packages

Below is the important section from my webpack.config.js file: module: { loaders: [ { test: /\.css$/, exclude: /node_modules/, loaders: [ "style-loader?sourceMap", "css-l ...

Adjusting the dimensions of the cropper for optimal image cropping

I am currently working on integrating an image cropper component into my project, using the react-cropper package. However, I am facing a challenge in defining a fixed width and height for the cropper box such as "width:200px; height:300px;" impo ...

Utilizing JavaScript within the Spring MVC form tag

Can you please assist me with the following question? I am currently working on a project using JSP, where we are utilizing Spring form tags. My issue involves creating two radio buttons that, when clicked, will display different options and pass the sele ...

Changing Image Size in Real Time

Trying to figure out the best way to handle this situation - I need to call a static image from an API server that requires height and width parameters for generating the image size. My website is CSS dynamic, adapting to different screen sizes including ...

Prevent scrolling within input field

I have a text entry field with background images that separate each letter into its own box. Unfortunately, an issue arises when I reach the end of the input: the view automatically scrolls down because the cursor is positioned after the last letter enter ...

Utilize Vus.js 2.0 in conjunction with Laravel 5.4 to pass an object to the application and allow for its global usage

How can I efficiently load the authenticated user and access it across all my Vue components without making unnecessary AJAX requests, as I can directly fetch it from the back-end? In my Laravel home.blade.php file, I have a reference to a Vue app and att ...