How to use AngularJS to parse JSON containing backslashes

Here is the JSON data stored in $scope.projectData:

[{
   "\"Space\"": "\"L1 (1 floor)\"",
   "\"Subject\"": "\"Corridor Distance\"",
   "\"Label\"": "\"Corridor Distance\"",
   "\"Color\"": "\"#33CCCC\"",
   "\"Length\"": "\"193.55\"",
   "\"Count\"": "\"0\"",
   "\"Multiplier\"": "\"1\"",
   "\"TotalFt\"": "\"193.55\"",
   "\"TotalCounts\"": "\"\"",
   "\"Notes\"": "\"\""},
{
   "\"Space\"": "\"L1 (1 floor)\"",
   "\"Subject\"": "\"Corridor Distance\"",
   "\"Label\"": "\"Corridor Distance\"",
   "\"Color\"": "\"#33CCCC\"",
   "\"Length\"": "\"210.36\"",
   "\"Count\"": "\"0\"",
   "\"Multiplier\"": "\"1\"",
   "\"TotalFt\"": "\"210.36\"",
   "\"TotalCounts\"": "\"\"",
   "\"Notes\"": "\"\"" }]

This function exists in my controller:

$scope.csvParse = function(item) {

    var array = JSON.parse(item);
     console.log(item);

  };

And this is how I call it in my HTML:

{{ csvParse(projectData) }}

I am facing issues with my code. Any suggestions on how to fix it?

javascriptjsonangularjsparsing

Answer №1

Why not consider implementing the following approach?

$scope.projectData = [{
   "Space": "L1 (1 floor)",
   "Subject": "Corridor Distance",
   "Label": "Corridor Distance",
   "Color": "#33CCCC",
   "Length": "193.55",
   "Count": "0",
   "Multiplier": "1",
   "TotalFt": "193.55",
   "TotalCounts": "",
   "Notes": ""},
{
   "Space": "L1 (1 floor)",
   "Subject": "Corridor Distance",
   "Label": "Corridor Distance",
   "Color": "#33CCCC",
   "Length": "210.36",
   "Count": "0",
   "Multiplier": "1",
   "TotalFt": "210.36",
   "TotalCounts": "",
   "Notes": "" }];

Also,

{{ projectData }}

UPDATE: Another option is to rectify your projectData by adjusting your csvParse function like shown below:

function clean(str) {
  return str.replace(/\"/g, "")
}

$scope.csvParse = function(objs) {
  var newObjs = [];

  objs.forEach(function(obj) {
    var newObj = {};

    for(var key in obj) {
      val = obj[key];

      newObj[clean(key)] = clean(val);
    }

    newObjs.push(newObj);
  });

  return newObjs;
};

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

ReactJS - The Art of Handling Extensive Forms

As I delved into the world of react forms, I came across two distinct ways of handling data within forms. The first method involves using refs by assigning refs to each data input: class CustomTextInput extends React.Component { constructor(props) { ...

javascriptformsreactjsecmascript-6

Is there a JavaScript alternative to wget for downloading files from a specified url?

"wget http://www.example.com/file.doc" can be used to download the file to the local disk. Is there an equivalent way to achieve this in JavaScript? For example, let's look at the following HTML snippet. <html> <head> <script langu ...

javascriptdownloadwget

A Gson error occurred due to a class android.app.ExitTransitionCoordinator having multiple JSON fields named mHandler, causing a java.lang.IllegalArgumentException

I'm in the process of converting a List consisting of a custom object named MyData: class MyData { private String id; private String title; private Drawable AppIcon; public MyData() {} public MyData(String id, String title, Draw ...

androidjsonserializationgson

Error: The function openCity() has not been defined

I'm currently working on creating a form that will allow me to store images into a PostgreSQL database. The database contains a single table with two fields: ID and IMG, which is of type bytea. The page has 2 tabs, and I have a function called 'o ...

javascriptphp

Mapping an array of objects to an array of Q promises: A step-by-step guide

I am struggling to comprehend this issue. I have a list of positions that I need to convert into an array of promises and then collect them. However, the problem is that positionPromises ends up as an array of nulls ([ null, null ]) var positionPromises ...

javascriptnode.jspromiseq

What sets apart npm correlation-id from uuid?

Can you please explain the distinction between the uuid and correlation-id npm packages? It seems that correlation-id actually utilizes the uuid package internally.. When would you recommend using correlation-id over uuid? Important: I am not utilizing ...

javascriptnode.jsreactjsangularnpm

The Google Maps listener event behaves as if it were clicked even though it is triggered by a mouseover

Two google.maps.event.addListener events are being added here google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { markerIconAcademicCenter.url = 'MapIcons/Circle32.png' }); google.maps.event.addListener(markerAcade ...

javascriptjquerygoogle-maps-api-3

Issue arises when separate module is created and directive stops functioning as expected

Insight Currently, I am in the process of developing an angular application following a recommended file structure outlined here. The structure involves breaking down the app into smaller modules for better maintainability. This approach seems promising a ...

angularjsangularjs-directive

What is the best way to add animation to my `<div>` elements when my website is first loaded?

I am looking for a way to enhance the appearance of my <div> contents when my website loads. They should gradually appear one after the other as the website loads. Additionally, the background image should load slowly due to being filtered by the wea ...

javascriptjqueryhtmlcss

Having difficulty retrieving information from a json file with jquery

Currently, my project involves fetching information from a web API into a web application using JQuery. <script src="jquery-1.11.2.js"></script> <script src="jquery-1.11.2.min.js"></script> <script type="text/javascript"> $( ...

jqueryajaxjsonweb-applications

Component encounters issue with undefined props being passed

Encountering an issue where dummy data is not being passed to a component, resulting in undefined props. Even console.log() statements within the same page are not functioning properly. Can anyone identify what might be going wrong here? import AllPosts fr ...

javascriptreactjsnext.js

Encountering an excessive number of re-renders due to attempting to display a FlatList component

I am attempting to showcase a flatList of numbers similar to this: (view image example) In order to achieve this, I created an array of objects with a numberName and a key using a loop: const number = 5; let [numbers, setNumbers] = useState([]); let nums ...

javascriptreactjsreact-nativesetstate

Tips to swap selections in a Select2 dropdown box

Is there a way to dynamically clear a Select2 option list and reload it with new data? Despite setting the data as suggested, it seems to only append the new data without clearing the existing options. $("#optioner").select2(); $("#doit").click(functio ...

javascriptjqueryjquery-select2-4

Struggling to make my JavaScript function work across different products

As a beginner in Javascript, I am facing an issue with a button that should open a 'window' when clicked. While it works for product 1 (chili oil), the same functionality is not working for product 2 (raspberry ratafia). Initially, the function ...

javascripthtmldombootstrap-4

Disable multiple buttons at once by clicking on them

What is the best way to disable all buttons in a menu when one of them is clicked? Here is my code: <div class="header-menu"> <button type="button"> <i class="fa fa-search" matTooltip="Filter"& ...

javascripthtmlangulartypescript

Unable to invoke the jQuery datetimepicker function within a personalized directive

I have created a unique time picker directive in AngularJS to display a datetimepicker. app.directive("timePicker", function() { return { restrict: "A", link: function(scope, elem, attrs) { / ...

javascriptjqueryangularjsangularjs-directive

Is there a way to showcase my information on flash cards using JavaScript?

Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is d ...

javascripthtmlcssnode.jsasynchronous

React component triggering dynamic redirection based on URL query changes

I've been struggling to implement a redirect with a query from a form in React. Despite trying different methods, I haven't been able to make it work. As a newbie in front-end development, what might seem simple to others is actually causing me s ...

javascriptreactjsurlhttp-redirectreact-hooks

How can you merge webSDK with jQuery within a Vue Component?

I am currently working on incorporating the webSDK found at into our Vue application. My goal is to load jquery only within a single component. Below is the code I have written, however, when I click the button, it does not seem to function as expected. ...

javascriptjqueryvue.jsvuejs2

Ways to solve scrambled characters on rs232 customer display

Currently, I am in the process of incorporating a customer display into my AngularJS and PHP billing system. Specifically, I am utilizing a Partner SP-550 with its CD7220 VFD 2x20 customer display. Interestingly, when attempting to display strings using ...

phpangularjsserial-port