What is the best way to pass a JSON object from R to Plumber in a format that JavaScript can interpret as an array instead of

My goal is to receive a JSON raw response from R Plumber and then utilize it in Angular. However, I am encountering an issue where the JavaScript Framework is interpreting it as a string instead of recognizing it as JSON format.

"[{\"id\":1,\"type\":\"Diagnostic\"},{\"id\":2,\"type\&\quotImpact\"}]"

I have looked into solutions on Stack Overflow but haven't found one that resolves my specific problem.

How can I ensure that the data is formatted correctly so that JavaScript frameworks can interpret it properly?

#* @apiTitle Diagnostic Report API
#* Send the list of report types
#* @get /reportTypes
#* @serializer unboxedJSON


function(){
  
  reportTypes <- read_csv(file = "ReportTypes.csv")
  # list(
  #   message_echo = paste("The text is:", "text")
  # )
}

In Angular, I am receiving the following error message. Although this may not be directly related to Angular Stack Overflow, I wanted to showcase the challenge I am facing:

Cannot find a differ supporting object '[{"id":1,"type":"Diagnositic"},{"id":2,"type":"Impact"}]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
javascriptrplumber

Answer №1

It may not be recommended to answer your own question, but after encountering many similar questions with no helpful solutions, I decided to share my findings in hopes of helping others facing the same issue. Hopefully, this explanation will save someone from hours of frustrating debugging.

Many posts correctly pointed out that plumber automatically serializes the r object, making it ready for consumption by any requesting application. However, despite trying various solutions suggested in those posts, I found that something was still missing on my end.

I discovered that my express.js server was also parsing the text to json.

router.get('/', function (req, res) {

  request.get({ url: 'http://localhost:5762/reportTypes' },
    function (error, response, body) {
      if (!error && response.statusCode == 200) {
        res.json(body); <-- this is where it's serializing again
      }
    });

});

Credit to the SO community and responders like @MrFlick who discussed JSON parsing, which led me to realize that the data was being serialized somewhere along the way. Upon further investigation, I found that my express server was re-serializing the already serialized data. Changing res.json to res.send resolved the issue.

Hopefully, this explanation will provide insight to those working with r or javascript and encountering similar problems. It's important to review the codes handling data requests to ensure they are not inadvertently serializing and escaping crucial characters.

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

What is the process for retrieving a detached element?

In the game, I'm looking to provide a "start again" option for users when they lose. The .detach() method comes in handy for hiding the button initially, but I'm struggling to make it reappear. Some solutions suggest using the append() method, bu ...

javascriptjquery

Unlocking the invitable_friends permission dialog on Facebook API: A step-by-step guide

During the installation process of an app, users are given the choice to revoke the invitable_friends permission. If this happens, I would like to request the invitable_friends permission again. Some apps seem to be able to open a dialog requesting this pe ...

javascriptfacebookfacebook-graph-apifacebook-javascript-sdk

Transform the characters within a string into corresponding numerical values, calculate the total sum, and finally display both the sum and the original string

I'm looking to convert a string containing a name into numerical values for each character, ultimately finding the sum of all characters' numerical values. Currently, only the first character's value is being summed using .charAt(). To achie ...

javascriptarrays

Creating an HTML slideshow banner: What you need to know

I am looking to create a slideshow for my banner that changes automatically. The banners are located in a folder, and I want the website to display them one by one without manual intervention. Currently, I have managed to display the images from the folder ...

javascriptphpjqueryhtmlslideshow

Implementing a switch to trigger a JavaScript function that relies on a JSON object retrieved from a GET request

Having some trouble using a toggle to convert my incoming Kelvin temperature to Celsius and then to Fahrenheit. It loads properly as default Celsius when the page first loads, but once I try toggling the function outside of locationLook, it doesn't se ...

javascriptjqueryhtmljson

Error encountered while parsing data in Internet Explorer versions 7, 8, 9, and 10 due to an invalid character. The status

This block of code is functioning correctly on Chrome and Firefox, however it seems to be having issues with Internet Explorer! It involves a simple JSON file call, fetching data, and then displaying it on an HTML webpage. Here's the code snippet: $. ...

javascriptjsoninternet-explorerparse-errorinvalid-characters

When utilizing the File System Access API, the createWritable() method functions perfectly within the console environment but encounters issues when executed

I've been diving into the File System Access API for an upcoming project and I'm struggling with using the createWritable() method. Specifically, I'm encountering issues with this line of code: const writable = await fileHandle.createWritab ...

javascriptfile-system-access-api

What are some cookie serialization techniques in JavaScript and PHP?

I have a form with multiple select options that I want to save in a cookie for user convenience. The goal is to make the serialization of the cookie easily readable in both JavaScript and PHP, allowing me to set the form onLoad and filter search results ba ...

phpjavascriptserializationcookies

Put identical objects into several arrays at the same time

This question is in relation to a previous query about arranging 3 arrays to correspond with each other. After creating my objects, I am now attempting to push values into their respective arrays based on JSON data received. let objName = ["object1", "obj ...

javascriptjqueryarraysjsonobject

What steps should I take to turn off caching specifically for directory listings?

Is there a way to generate a fresh file list every time without using cached data? I have a basic PHP script that fetches the contents of a directory and stores them in an array. The script works perfectly the first time it is used, but subsequent calls m ...

phpjavascriptajax

What's the reason behind the failure of bitwise xor within a JavaScript if statement?

I'm trying to understand the behavior of this code. Can anyone explain it? Link to Code function checkSignsWeird(a,b){ var output = ""; if(a^b < 0){ output = "The "+a+" and "+b+" have DIFFERENT signs."; }else{ output = ...

javascriptbitwise-operatorsbitwise-xor

Filtering Tables with AngularJS

Currently, I'm experimenting with using angularJS to filter data in a table. My goal is to load the data from a JSON file that has a structure like this (example file): [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, { ...

javascripthtmlangularjs

When the value is blank, do not include the class attribute when appending

http://jsbin.com/guvixara/1/edit I have a situation where I am dynamically inserting a button... $(".confirm-add-button").on("click", function() { var $ctrl = $('<button/>').attr({ class: $('.newbtnclassname').val()}).html($(& ...

javascriptjquery

Retrieve data from an ASP.NET Web API endpoint utilizing AngularJS for seamless file extraction

In my project using Angular JS, I have an anchor tag (<a>) that triggers an HTTP request to a WebAPI method. This method returns a file. Now, my goal is to ensure that the file is downloaded to the user's device once the request is successful. ...

c#javascripthtmlangularjsasp.net-web-api

The returned type of intersected functions in Typescript does not match the inferred type

While attempting to extract the return type of an intersected request, I encountered a discrepancy between the return type and the inferred type. Check out the shortened URL for more details: https://tsplay.dev/mAxZZN export {} type Foo = (() => Promis ...

javascripttypescriptfunctionreturn-typetype-mismatch

Using React: What is the best method for handling asynchronous requests to fetch a FirebaseToken and subsequently utilizing it in an API request?

My React app is interacting with an API through a Client component. Components can access the Client like this (example in the componentDidMount function of the Home page, where I retrieve a list of the user's items): componentDidMount() { let u ...

javascriptreactjsfirebasefirebase-authentication

Setting up Redis for session store in the right way involves a few key steps

I have been attempting to configure Redis Store in the following manner: var express = require('express'); var app = express(); ....... ....... var session = require('express-session'); var redis = require("redis").createClient(); var ...

javascriptnode.jsexpressredis

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

javascripthtmlangular

Convert the class to a file upload using jQuery

I am currently working on a project involving a file upload script. I have multiple directories where the files need to be uploaded, and I'm attempting to use a single form for this purpose. So far, I have been able to change the form class using jQu ...

javascriptjqueryajaxclass

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui