Export nested objects from an AngularJS JSON array to a CSV file

When I download my data into a CSV file, the display setting is showing as "[object Object]". This is not the desired outcome.

https://i.stack.imgur.com/ej2UO.png

The expected display should look like this:

https://i.stack.imgur.com/8JJ88.png

This is part of my JavaScript code:

  $scope.download = function () {
    var csv = jsonToCsv(['ThemeName', 'DataSharing', 
   'DisplaySetting', 'ExpiryDate', 'Icon', 
   'PublishDate','QueryName','ThemeName', 'ThemeOwner'], health)
    var csvBlob = new Blob([csv], { type: 'text/csv' });
    saveAs(csvBlob, 'json.csv');
    };

Could someone please advise on how to modify this code to display the object correctly in the CSV file? Is there a way to customize which objects are displayed in the CSV file?

I would be grateful for any assistance or guidance. I am open to changing my coding approach if it leads to a solution. Any recommended resources would also be highly appreciated. Thank you!

Here is an example of using JSON.stringify:

   else if ($scope.all[i].CATEGORY == 'Health')
  {
     health.DISPLAY_SETTING = 
     JSON.stringify(health.DISPLAY_SETTING)
     health.push($scope.all[i]);
  }

Answer №1

One way to approach this is by using the JSON.stringify() method on the DisplaySetting property within the health object before attempting to convert it to a CSV format:

health.DisplaySetting = JSON.stringify(health.DisplaySetting);

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

Click on the link or tab to update the marker location on the Google Map

Can you click on Tab 2 to change the marker/location, and then go back to Tab 1 to switch it back to the original location? [Links to Fiddle] http://jsfiddle.net/ye3x8/ function initialize() { var styles = [{ stylers: [{ saturati ...

Using a package with `webfontloader` in NextJs for Server-Side Rendering: A guide

Currently, I am working on creating an application with nextJS and incorporating a package that utilizes Webfontloader internally. After installing the library, my application encountered an error preventing it from running successfully. It seems like th ...

I have received a JSON multi-line string after entering information in a textarea

I've been working on a small social network project where users can create and share posts. However, I encountered an issue with formatting when storing and displaying the posts. When a user enters text with line breaks in the post creation form, it ...

Issue with the select element in Material UI v1

I could really use some assistance =) Currently, I'm utilizing Material UI V1 beta to populate data into a DropDown menu. The WS (Web Service) I have implemented seems to be functioning correctly as I can see the first option from my Web Service in t ...

Leveraging data schemas to manage the feedback from APIs

I am curious about the benefits of modeling the API response on the client side. Specifically: First scenario: const [formData, setFormData] = useState(null); ... useEffect(() => { const callback = async () => { try { const fetchDa ...

invoke the modal function from a separate React file

I am currently studying react and nextjs. I am experimenting with calling a modal from another file but unfortunately it's not functioning as expected. Here is the code I used: Signin.js import { Modal } from "react-bootstrap"; import { u ...

Ways to display or conceal text using Vanilla JavaScript

I am struggling to toggle text visibility using Vanilla JS. Currently, I can only hide the text but cannot figure out how to show it again. <button id="button">my button</button> <div> <p id="text">Hello</p& ...

It's time to wrap up the session with some old "cookies" and a closing function

Would like the message to only display once after clicking the "Cookies" button. Once the user accepts cookies, they should be stored on their device for a set period of time. Your assistance is greatly appreciated. :) Below is the html and js code: $(do ...

Altering documents post Bower installation

I took the initiative to manually download the css and js files for an angular module (here). In order to make a small adjustment, I modified the css (specifically changing max-width in the media query): Original: @media only screen and (max-width: 800px ...

Restricting the type of user input in HTML forms

Requirements: Input must be a whole number between 2 and 99, inclusive. Current Solution: <input required type="number" min="2" max="99" oninput="this.value = Math.abs(this.value)" maxLength="2" matInp ...

Which comes first in AngularJS: ng-include or ng-repeat?

What is the outcome if I have a template containing ng-repeat and include it using ng-include? Will the included template have the completed ng-repeat, or will it be included without the ng-repeat being complete (and then completed after inclusion)? ...

How can I troubleshoot email validation issues in Vue.js?

<button type="submit" class="register-button" :class="(isDisabled) ? '' : 'selected'" :disabled='isDisabled' v-on:click=" isFirstScreen ...

Loop through a variable class name in JavaScript

When working with Javascript, I have a series of elements with identical divs: (....loop, where "count" is a unique number for each column) <other divs> <div class="pie"></div> </div> My goal is to be able to rotate each individ ...

Errors that occur when parsing templates in Angular 2

I'm encountering a template parse error with my Angular 2 component using the following template: <div *ngIf="chapter == 1"> <p><h4><br><b>Exercise</b>: Get the Groceries starting point<br></h4 ...

Commitment within a forEach iteration

While working with a foreach loop, I am facing some challenges. Here is the scenario: I have multiple elements stored in an object array. For each object, I need to execute two queries. After completing the queries for one object, I move on to the next and ...

Is it possible for a div nested within another div to still occupy space on the page despite being set

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $("select#choosebook").change(function(){ $(".title").slideDown(" ...

Arranging orders according to specific preferences in Angular

In one of my columns, I have a list of colors stored as follows: "red","blue","white","black","yellow" Instead of sorting them alphabetically, I want to customize the order like this: "yellow","blue","red","white" and "black" This custom sorting is imp ...

Refreshing a value in the view at regular intervals using a filter in Vue

Trying to create a countdown timer with vue, but the view is not updating. Here are my app.js and index.html: var nowDate = new Date; var nextNewYearsEve = new Date(nowDate.getFullYear(), 11, 31, 23, 59, 59, 59); var timeLeftToNewYearsEve = nextNewYears ...

Troubleshooting problem with custom Angular directive integrating KineticJS

Hey there, I'm currently working on putting together a KineticJS application in Angular and need to resolve a minor issue. While following an example for setting up a draggable shape in AngularJS using KineticJS from this link: , I encountered this er ...

Retrieving an item within another item

I'm attempting to retrieve the value of usertype within the result object, but I'm encountering issues with this. Here's what I've tried so far: if(data.result.usertype === 2){ console.log("redirect to type 2 user") } else if(data.re ...