Utilizing RxJs to flatMap objects containing observable properties

I'm having difficulty understanding a simple RxJs query that involves merging Observables that are wrapped inside an object. If I directly return the Observable from flatMap, it works fine but I also need to include the name in my output. How can I accomplish this?

This problem is specifically related to RxJS 5.0.0-beta.2

Here is the basic data structure:

var data = [
  {
    "name": "Test #1",
    "users": [
      {
        "name": "John Doe",
        "gender": "male"
      },
      {
        "name": "John Doe",
        "gender": "male"
      },
      {
        "name": "Jane Doe",
        "gender": "female"
      }
    ]
  },
  {
    "name": "Test #2",
    "users": [
      {
        "name": "John Doe",
        "gender": "male"
      },
      {
        "name": "Jane Doe",
        "gender": "female"
      },
      {
        "name": "Jane Doe",
        "gender": "female"
      }
    ] 
  }
];

The RxJs function in question:

Observable.fromArray(data)
  .flatMap(x => {
    return Observable.of({
      "name": x.name, 
      "count": Observable.fromArray(x.users)
                .filter(x => x.gender == "male")
                .count()
      })
  })
  .toArray()
  .subscribe(result => {
    console.log(result);
  });

The desired result should be:

result = [
    {
      "name": "Test #1",
      "count": 2
    },
    {
      "name": "Test #2",
      "count": 1
    }
  ];

However, the actual result obtained is:

result = [
    {
      "name": "Test #1",
      "count": Observable
    },
    {
      "name": "Test #2",
      "count": Observable
    }
  ];

Answer №1

Utilizing Observable.fromArray(data) to transform the data, and then using flatMap to filter out male users from the result. Finally, converting the filtered data into an array and subscribing to the final result for logging purposes.

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

Unique patterns on a 3D model in Three.js

I am attempting to replicate the look of the model shown in this photo https://i.sstatic.net/IDLaV.png How can I remove the strange lines from the model while rotating it? You can observe these lines when rotating the model on this link . What seems to be ...

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

Exploring the functionalities of the modulus operator in Handlebars

I am looking to implement a solution that involves adding a div container holding 4 images based on the JSON data provided below: var pictures = [ {img_path: "1/1.jpg"}, {img_path: "1/2.jpg"}, {img_path: "1/3.jpg"}, {img_path: "1/4 ...

Checking the conditional styling implemented with Material UI makeStyles: a step-by-step guide

For the past few weeks, I've been working on a React app where I heavily rely on Material UI components. One particular component changes its style based on the values of its props. To achieve this, I used the following approach: const useStyles = ...

The Bootstrap navigation pills do not function properly when using a forward slash in the tab link

I am currently working with Bootstrap and using nav pills. I have noticed that if I include a / sign in the link of a tab, it causes that specific tab to malfunction and triggers a JavaScript error in jQuery's own code when clicked on. How can I go ab ...

What could be the reason behind the data not being returned by this API call?

$.ajax({ url : 'http://prcweb.co.uk/lab/what-makes-us-happy/data/summary.csv', type : 'get', }).done(function(data, statusText, xhr){ var status = xhr.status; //200 var head = xhr.getAllResponseHeaders(); //Det ...

Custom dropdown selection using solely JavaScript for hidden/unhidden options

I'm trying to simplify things here. I want to create a form that, when completed, will print the page. The form should have 3-4 drop-down lists with yes or no options. Some of the drop-downs will reveal the next hidden div on the form regardless of th ...

The conundrum of jsPDF's image compatibility

I am attempting to generate a PDF document on the client-side using the jsPDF library. The code I have written is as follows: <script type="text/javascript" src="libs/base64.js"></script> <script type="text/javascript" src="libs/sprintf.js" ...

Having issues with jQuery input values not being recognized on form submission

I have all my data prepared and ready to be saved in my database. However, I am encountering an issue where no data is being picked up when I hit submit. The data is generated from my JavaScript file using the .append() method. Below is the HTML structure ...

What is the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

Leverage JavaScript to run a snippet of PHP code directly (without utilizing a separate PHP file)

I am looking for a way to integrate PHP into my web page using JavaScript and AJAX. I want the PHP file to be included and executed as if it is part of the native page, allowing me to utilize features like GET requests. <div id="firstAjaxDiv">Defaul ...

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

Looking for any JavaScript/jQuery libraries that can help with sorting tables, exporting data, or generating dynamic rows

Currently seeking a JavaScript library that provides column sorting, CSV exporting capabilities, and enables dynamic row manipulation with input boxes. The key requirement is that all processing must be done client-side to ensure data privacy and sensiti ...

Tips for including a Places Autocomplete box within an InfoWindow on Google Maps

I am currently working with the Google Maps Javascript API v3 and I am facing a challenge. I want to integrate a Places Autocomplete box inside an InfoWindow that pops up when a user clicks on a marker. I have successfully created an autocomplete object a ...

Verify if session is in existence

Currently in the process of setting up my NodeJS and Express App, utilizing Passport for authentication through Google Sign In and Login. All functionalities work flawlessly when tested on localhost. The sign-in process is smooth, and upon checking, I can ...

Verify if an item is currently within the user's view

I'm encountering a new issue with a menu I'm working on. My goal is to hide the menu when the user clicks outside of it. The challenge lies in the fact that the menu is always visible but translated to the right of the element, making it not dire ...

Issue with parsing Mongoose response accurately

I'm fairly new to working with mongoose and have been struggling to find a solution to my current issue. My goal is to query my MongoDB database (hosted on mlab) and pass an object literal to the front end template. I am using hoganjs for templating ...

Convert the html list to a select dropdown with a hidden input type

In the process of revamping some code created by a fellow colleague, I have decided to modify his list into a more suitable select-option drop-down list. The PHP code provided by him looks like this: echo "<ul>"; echo "<li><a href='#& ...

Creating a network of lists by combining multiple arrays

I'm currently working on generating a comprehensive list of all possible combinations of multiple arrays. While I have experience in Matlab and understand loops and basic coding principles, I'm unsure of the most efficient method to compile these ...

show certain DIVs based on the URL

Is it possible to dynamically display different sections based on the URL? My event website has 3 subevents, and I'd like to show the date of each event in the navigation bar for their respective URLs. <div id="us" class="us-web-date">&nbs ...