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

Configuring the React Typescript router to support username-based URLs should be done in a way that does not cause conflicts with other routes

I am looking to display a user's profile on a URL format such as www.domain.com/<userName> and load the component ShowProfile. I want to ensure that terms is not mistaken for a username, so if I visit www.domain.com/terms, I do not want to load ...

What's the process for deducing the default generic parameter from a function type?

Is there a way to extract the default type parameter of a function in order to make this statement compile successfully? const fails: string = "" as ReturnType<<T = string>() => T>; ...

There is a WARNING occurring at line 493 in the file coreui-angular.js located in the node_modules folder. The warning states that the export 'ɵɵdefineInjectable' was not found in the '@angular/core' module

I encountered a warning message while running the ng serve command, causing the web page to display nothing. Our project utilizes the Core Ui Pro Admin Template. Here is the list of warning messages: WARNING in ./node_modules/@coreui/angular/fesm5/coreu ...

transmitting JSON information from a Django view to Ajax

I'm attempting to transfer JSON data from a Django view to a template using AJAX. Here is the ajax code: $(document).ready(function(){ console.log("Executing this") $.ajax({ url: "/get_ecommdata/", type: "get", ...

How come I am unable to retrieve the response from Alamofire?

I am facing an issue with getting the result of my Alamofire request. I have created an output array from a JSON async call, but I am unable to extract the resultArray outside of the dispatch block. Interestingly, when I add println statements for debuggin ...

Issues arise as a result of conflicts between the dependencies of @ionic/angular, Angular 13, typescript,

Current Environment Details: ionic info Ionic: Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.8.5 @angular-devkit/build-angular : 13.0.2 @angular-devkit/schemat ...

Exclude the key-value pair for any objects where the value is null

Is there a way to omit one key-value pair if the value is null in the TypeScript code snippet below, which creates a new record in the Firestore database? firestore.doc(`users/${user.uid}`).set({ email: user.email, name: user.displayName, phone: ...

Error encountered when referencing prop on textarea: 'There is no suitable overload for this call'

I've been referring to the documentation in order to set a reference using the useRef hook, with the goal of being able to programmatically clear an input field. However, when I add ref as a prop to a textarea, it triggers a lint error saying that no ...

Converting webpage JSON data to Python script encountered an error: urllib.error.HTTPError: HTTP Error 403 - Forbidden access

I successfully developed a program that functions with a local JSON data file! Code Block: def datas(self): with open ("C:\\Users\\Messi\\Desktop\\Python\\\\tek.json ...

Accessing data retrieved from an API Subscribe method in Angular from an external source

Below is the Angular code block I have written: demandCurveInfo = []; ngOnInit() { this.zone.runOutsideAngular(() => { Promise.all([ import('@amcharts/amcharts4/core'), import('@amcharts/amcharts4/charts') ...

Exploring the possibilities of ZMQ_XPUB_MANUAL in action with zeromq.js

I'm currently in the process of setting up a pub/sub broker using ZeroMQ, and I want to ensure that clients are only able to subscribe to authorized prefixes. While researching this topic, I came across a helpful tutorial that discusses achieving a si ...

The 'DOCUMENT' module (imported as 'i23') could not be located within '@angular/platform-browser'

During my upgrade from Angular version 7 to 8, I encountered an error when building the project even though I am not using DOCUMENT. It seems like something is causing this issue that I am overlooking. I have thoroughly checked all the files and confirmed ...

Getting data from JSON to fill an array: A step-by-step guide

I am currently facing an issue where I am trying to incorporate data from a JSON file into my array, but for some reason, the information is returning as 'undefined' because nothing is being created in my array. Below are the contents of the JSON ...

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

I'm encountering the ExpressionChangedAfterItHasBeenCheckedError due to my getter function, selectedRows, in my component. public get selectedRows() { if (this.gridApi) { return this.gridApi.getSelectedRows(); } else { return null; } } ...

parsing json data from statuspage io

I am looking to extract text from a JSON file and display it on an HTML page. The API can be found here: function setup() { loadJSON("https://d33g96wd23dd.statuspage.io/api/v2/summary.json", gotData, 'jsonp'); } function gotData(data) { v ...

What is the best way to retrieve information from a JSON string?

I am currently receiving a JSON object from the backend and I only need the "result" array in my Angular application template variable. { "result":[ {"name":"Sunil Sahu", "mobile":"1234567890", "emai ...

Encountering a Python error while attempting to load JSON data from a previously opened file

I encountered an error when trying to convert a json file into a variable and then converting the same file again into a separate variable. I was under the impression that json.load converts a JSON object to its Python equivalent, so I'm confused as t ...

Challenges with Spreading Props in TextField Component After MUIv4 Upgrade with TypeScript

Latest Material-UI Version: 4.1.0 I'm encountering difficulties in passing props to an abstracted <TextField /> component that I've developed. Below is the snippet of code: PasswordInput.tsx import * as React from 'react' impo ...

Creating a standard arrow function in React using TypeScript: A Step-by-Step Guide

I am currently working on developing a versatile wrapper component for Apollo GraphQL results. The main objective of this wrapper is to wait for the successful completion of the query and then render a component that has been passed as a prop. The componen ...

What is the best way to navigate through a complex array in React that includes objects and nested arrays?

I have been working on a JavaScript array that includes subobjects with arrays nested in them. My goal is to iterate through the entire parent object using React. Although I attempted the following approach, unfortunately it did not yield the desired outco ...