Unable to convert JSON data for integration with rxjs

I am currently using a webSocket to receive data from my server. I have created an rx Subject called MessageEvent that allows me to retrieve the data.

However, although I can successfully log the JSON data in my observable, I am unable to access any properties as they return undefined.

export interface Message {
request: string;
subscription: string,
}

@Injectable()
export class SocketProvider {

public message: Subject<Message>;

constructor(private socket: WebsocketProvider) {
  console.log('Hello SocketProvider Provider');
  this.message = <Subject<Message>>socket
  .connect('ws://192.168.0.110:8081')
  .map((response: MessageEvent): Message => {
    let data = response.data;
    return data;
  })
}

}

Here is how it is used:

ionViewDidEnter() {
    console.log('ionViewDidEnter ConfigsInputsPage');
      this.subscribtion =  this.socket.message.subscribe(msg => {
      this.message = msg;
      console.log("Response From webSocket server: " + msg);
      console.log(msg.request);
    });
    this.socket.message.next(this.enterMessage);
}

private enterMessage = { 
  request: 'configs',
  subscription: 'suscribe'
}

Answer №1

After reviewing my code, I realized that I needed to parse the JSON data again in my socket.ts file:

constructor(private socket: WebsocketProvider) {
  console.log('Hello SocketProvider Provider');
  this.message = <Subject<Message>>socket
  .connect('ws://192.168.0.110:8081')
  .map((response: MessageEvent): Message => {
      let data = JSON.parse(response.data); //  <----------
      return data;
  })
}

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 are the steps to retrieve the original source code of an HTML file, specifically in Angular 2 RC4

Is there a way to retrieve the source code that I manually typed in my IDE using JavaScript? Note: I am working with angular2 rc4. I attempted to access it using Reflect.getMetadata, but encountered errors indicating that it is not functioning properly. ...

Utilizing Symfony REST DTO validation and injecting it into the Model similar to a paramconverter

Is there a way to create a request filter for post actions in a JSON REST API that takes the request's body, fills the DTO, validates it, and injects it into the controller action like paramconverter? I have an ExampleDTO structured like this: class ...

The Laravel controller is producing a JSON response that is coming back as undefined

Greetings! I am working with a JSON array and running the following code in my AJAX call: $('tbody').html(data.table_data); When I receive the response, it looks like this: [{"id":28,"fname":"tester","lname":"testlast","phone":"00000000","emai ...

Error: The class you are attempting to access is

Currently, I am utilizing Vite.js along with TypeScript. My TypeScript file is located in 'src/vmodel/VGraph'. Within the index.html file, I import the aforementioned file as follows: <script type="module" src="/src/vmodel/VGrap ...

Is there a way to show text as symbols in Primeng components?

Check out this helpful example that demonstrates what I am attempting to achieve. I have implemented p-menu from primeng. Is there a method to convert text into symbols like &trade to ™ and &#8482 to ®? ...

Utilize Firebase for Playwright to efficiently implement 'State Reuse' and 'Authentication Reuse'

In my testing environment, I want to eliminate the need for repeated login actions in each test run. My approach involves implementing 'Re-use state' and 'Re-use Authentication', but I've encountered a challenge with Firebase using ...

Unraveling JSON using PHP - Extracting URL from a Facebook profile picture

I am trying to extract the 'url' value from a JSON response using PHP. Below is my attempt, but it seems to be incorrect: $json = file_get_contents('http://graph.facebook.com/{fb-ID}/picture?type=large&redirect=false'); $decoded ...

Using the Play framework to showcase data in an HTML table

I have a project where I am working with multiple tables, one of which is a Person table containing id and name attributes. I have successfully retrieved the data from the database using MySql and converted it into JSON. However, I am struggling to find a ...

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

When working with Angular 9, I am facing an issue where I need to format and send my date in a specific way within the payload. Currently, the code is sending the date in this format: otgStartDate: 2021-07-20T09:56:39.000Z, but I actually want it to be for ...

Retrieving information from the resolver component in Angular

After filtering data retrieved from the backend, I am struggling to pass the final data from the resolver to the component. While I can successfully filter the data and store it in an array within the resolver, I cannot seem to return this array so that it ...

How to extract data from a JSON string using VB.Net

As a beginner, I am finding it challenging to understand how to utilize the Newtonsoft JSON methods in VB.Net to extract specific information from a JSON string. The JSON data consists of two main parts: the 'Total' and the 'results'. ...

Make a JSON request to an API using PHP

I am currently developing an API that utilizes JSON for sending information. POST /api/v3/users/ HTTP/1.1 Host: example.com Content-Type: application/vnd.api+json Authorization: Bearer ab1dcb45be7e43db2212b0d2b0ca3892 This piece of information will tr ...

Error: The index "id" is not defined

Hey there, I have been working on fetching data from a JSON URL located at this link. However, I seem to be encountering an error that I can't quite comprehend. If anyone has any insights or solutions, I would greatly appreciate the help. Thank you in ...

Convert JSON response date format to a format specified by the user

The following code snippet is currently returning the dates for $("#dob") and $("#anniversery") as 2014-04-01T00:00:00 This is my current code: <script> $(function() { function log(message) { $("<div>").text(message).p ...

Transferring information from JSON to HTML

Recently, I came across this handy design tool within our service that helps generate Gauge charts by simply adding a specific div class to the desired pages. <div class="gauge" id="g0" data-settings=' { "value": ...

The bidirectional association between Hibernate and TomEE+ can lead to JSON recursion

I am encountering a stackoverflow exception in my TomEE 9.0.12 application with Hibernate 5.3.7, caused by JSON recursiveness. I am using the default serialization provider that comes with TomEE+, which is org.apache.johnzon, instead of Jackson. The error ...

Could you please share the standard naming convention used for interfaces and classes in TypeScript?

Here's what I have: interface IUser { email: string password: string } class User { email: string password: string constructor(email: string, password: string) { this.email = email this.password = password } isEmailValid(): boo ...

Where can I find the Cypress.json file for Angular integration with Cypress using Cucumber?

We are currently transitioning from Protractor to Cypress utilizing Cucumber with the help of cypress-cucumber-preprocessor. While searching for Angular documentation on this setup, including resources like , all references lead to an automatically generat ...

Organizing JSON file after downloading in R

I have acquired a historical time series of Apple's Income Statement data from the following website: After downloading the data using this code: library(RJSONIO) library(RCurl) raw_data <- getURL("https://financialmodelingprep.com/api/financials ...

Extracting information from JSON ( AngularJS)

I have a collection of questions stored in my JSON file, but I want to display only one at a time until the user selects the correct answer and proceeds to the next question. Here is the HTML template: <div ng-controller="quizController"> <ul> ...