Transforming an array of objects into an array of strings using TypeScript

I'm looking to use lodash to transform an array of objects into an array of strings.

Here is the original array:

const tags = [{
    "display": "tag1",
    "value": "tag1"
}, {
    "display": "tag2",
    "value": "tag2"
}]

The expected result is:

const tags = ["tag1", "tag2"]

This is what I have tried so far:

const data = [{
    "display": "tag1",
    "value": "tag1"
}, {
    "display": "tag2",
    "value": "tag2"
}]

const result = _(data)
    .flatMap(_.values)
    .map((item) => { if (typeof item === 'string') { return item; } else { return; } })
    .value()
console.log('result', result);

Answer №1

Forget about lodash, you can achieve the same result with plain JavaScript using map function

EXAMPLE

const items = [{
    "name": "item1",
    "price": "$10"
}, {
    "name": "item2",
    "price": "$20"
}]

var prices = items.map(item => item.price);
console.log(prices);

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

Transform the image to an `np.array` and convert its RGB values from `0..255` to `0.00..1.00` float values

I am looking to import a .PNG file into a 2D array of RGB values structured as nested arrays. Specifically, an image with dimensions of 16x16 would be represented as an array of size 16x16x3, where the innermost array contains the RGB values. I am familia ...

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

Is there a way to integrate a d3 force directive graph for use with AngularJS?

I have successfully created a D3 force directive graph using plain JavaScript. If you want to see the working D3 graph, click on this link. Now my goal is to fetch data from a service and display the graph in AngularJS. I am wondering how I can turn this ...

error detection in AJAX response handler

My web-application was created using PHP, AJAX, and jQuery, and the development process went smoothly. The majority of the requests to the application are made via AJAX for operations such as insert, update, delete, and select. I have already implemented ...

Renaming properties in an AngularJS model

After receiving the data in a structured format, my task is to present it on a graph using radio buttons. Each radio button should display the corresponding category name, but I actually need each button to show a custom label instead of the original categ ...

Achieving successful implementation of SSAO shader on SkinnedMesh models

Trying to implement the SSAO post-processing shader with the most recent version (r77) of three.js has been a challenge for me. I have been utilizing the EffectComposer, with the code completely replicated from the example page provided here: The specific ...

Mongoose: The aggregate method does not filter properly when using Model.field_1.field_2

Explaining a custom function: const getNotificationsForLounge = async (lounge_id) => { try { const notifications = await Notification.aggregate([ { $match: { "lounge_join_request.lounge": lounge_id, loun ...

Handling responses from http requests in Node.js

Below is the code snippet I am working with: exports.post = function(request, response) { var httpRequest = require('request'); var uri = "url.."; httpRequest(uri, function(err, responseHeaders, bodyResponse) { var data = JSON.parse( ...

Display a sneak peek of the letter as you browse through the list

My List has been populated with data from my database. I am looking to display a letter preview when scrolling through the A-Ö list. How can I achieve this? Thank you. public class L extends BaseActivity { private ListView m_listView; private DB ...

Having trouble fetching the correct URL from JSON using PHP

Here is what I'm aiming to achieve: [{ "id": "1", "url": { "small": "http://website/images/image.jpg", "large": "http://website/images/image.jpg" }, }] This is the code I have written: <?php defined('DS') ...

Issues with changing password on Firebase after re-authentication

What is the goal of this task? To re-authenticate the user by verifying their current password (this.state.currentPassword) To update the user's password with a new one (this.state.newPassword) Which issue am I encountering? Successfully complete ...

Retrieve a variable from the context and assign it to the Angular scope

I'm having trouble accessing the sourcePath in the controller $scope. This is the code I have: (function() { var sourcePath; sourcePath = 'app/assets/javascripts/shared/controllers/some_controller.coffee'; angular.module("shared"). ...

Retrieve JSON data from the website and use AJAX and jQuery to remove it

I am working on a local project with an app that contains a table of data. I need to download the data from a JSON file (todo.json) using jQuery and AJAX, display it in the table in HTML, and then be able to delete, update, and save individual objects or a ...

jQuery Mobile is experiencing page height inaccuracies

My web application, built with jQuery Mobile 1.2.0, is encountering an issue with page height calculations on Windows Phone. While iOS and Android display correctly, there is a gap at the bottom of the page on Windows Phone. Is there a CSS-only solution t ...

Tips for updating the display by fetching data from a database through a websocket

I am looking for a solution to update a specific part of my webpage without having to refresh the entire content. On my index.html page, I have three panels displaying various ticket statuses. I want to automatically update the number of resolved tickets s ...

Reverse the log of an array

How can I reverse an array in JavaScript, with each item on a new line? function logReverse(input) { let reverse = input.reverse(); return reverse; } // The current implementation does not display items on different lines logReverse(['HTML&ap ...

Incorporate Subtitles into Your Website Using JWPlayer

I want to incorporate Video Captions similar to those seen on Lynda.com, for example at The captions should synchronize with the player and also appear in a separate block of HTML below the player. I am using JWPlayer for my video and have successfully in ...

Display numerical ranges on top of the jQuery slider

Hello there! I recently implemented a jQuery slider on my website and now I am looking to add numbers above the slider, kind of like intervals on a ruler. Does anyone know a simple way to achieve this? ...

Personalizing the pop-up window using window.open

When clicking a hyperlink on a page, I need to open multiple pop-up windows. To achieve this, I must use the Window.open function instead of showModalDialog. However, I have noticed that the appearance is not satisfactory when using Window.open. (Essentia ...

Looping through components using the render template syntax in Vue3

Below is my Vue3 code snippet: <template> {{click}} <ol> <li v-for="item in items" :key="item" v-html="item"></li> </ol> </template> <script setup> const click = ref(); const items = ...