Separate string by using a regular expression pattern

Looking to parse a dynamic string with varying combinations of Code, Name, and EffectDate. It could be in the format below with all three properties or just pairs like Code-Name, Code-EffectDate, or Name-EffectDate.

{"Code":{"value":"1"},"Name":{"value":"Entity1"},"EffectDate":{"value":"23/11/2016"}}

and convert it to:


... 
this.data[0].key ='Code'; \\desired output
this.data[0].value = '1';
this.data[1].key = 'Name';
this.data[1].value = 'Entity1';
this.data[2].key = 'EffectDate'; 
this.data[2].value = '23/11/2016';

Here's my approach:


...
filters:string;
data:string[];
...
this.data = this.filters.split("\b(?:(?!value)\w)+[a-zA-Z0-9/]\b");
console.log(this.data);

Using pattern \b(?:(?!value)\w)+[a-zA-Z0-9/]\b, but unable to achieve desired results. The filter returns only one array. Any suggestions are welcome. Thank you!

Update #1:

Working with PrimeNg extension for data tables, I receive events as parameters. The event filters provide a list of filter objects, which I need to convert to a specific format for service compatibility.

https://i.sstatic.net/ce4Bq.png

Answer №1

It appears to be JSON data. Instead of manually iterating over the key-values, you could simply use data = JSON.parse(content) and then access the keys with Object.keys(data) and the values with data[i]["value"].

You might want to consider implementing the following solution:

var data = [];
for(var i in event.filters){
  data.push({"key": i, "value": event.filters[i].value});
}

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

Creating a custom utility type in TypeScript for serializing an array of objects: What you need to know

Imagine I have the following specified object: type Test = { date: Date num: number str: string } In this object, there is a Date type that needs to be converted into a string ("serialized"). To achieve this, I came up with the concept of a Generic ...

Tips for establishing communication between a React Native webView and a React web application

I am currently working on establishing communication between a webView in react-native and a web-app created with React-360 (and React). I am utilizing the react-native-webview library and following a guide for creating this communication. You can find the ...

What is the best way to transfer data from R to JS in a Shiny app and incorporate it into the user interface?

I am looking to add a custom news button to the header of my shinyapp, which will display information from a specific dataset. I want the button to show the number of news items available, similar to how shinyDashboard::notificationItem() works but with mo ...

Tips for aligning the types of objects transmitted from a Web API backend to a React/Redux frontend

After creating a backend for my app using .net, I now have CRUD operations available to me. When performing a POST action, the response includes an entire new item object: {"Id":"7575c661-a40b-4161-b535-bd332edccc71","Text":"as","CreatedAt":"2018-09-13T15 ...

jQuery: Function is not running as expected

I'm facing a challenge in executing a function twice, and I'm having trouble identifying the issue. Check out my JSFiddle at the following link: http://jsfiddle.net/g6PLu/3/ Javascript function truncate() { $(this).addClass('closed&apo ...

Interactive JQuery calendar

Can anybody assist me with this issue? I am seeing question marks in the graphic and I'm not sure why. I remember encountering these symbols before and I believe it has something to do with charset. Currently, I am using: <meta http-equiv="Content ...

Controlling hover effects with Material-UI in a programmatic way

I have integrated the following Material-UI component into my application: const handleSetActive = _spyOn => { linkEl.current.focus(); }; const linkEl = useRef(null); return ( <ListItem button component={SmoothScrollLink} t ...

What is the best way to eliminate duplicate data from an HTTP response before presenting it on the client side?

Seeking assistance on how to filter out duplicate data. Currently receiving the following response: {username:'patrick',userid:'3636363',position:'employee'} {username:'patrick',userid:'3636363',position:&a ...

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

Difficulty Resolving Parameter Resolution in Angular 5 Shared Library Module ([object Object], ?, ?)

I'm facing an issue while attempting to integrate a custom shared component library into my Angular application, which has been upgraded from Angular 5 to Angular 4. Unfortunately, I am unable to resolve the problem at hand. The error message I&apos ...

Create a server directory structure that populates multiple HTML dropdown lists using either jQuery or AJAX

As a novice navigating jQuery and Ajax, I find myself faced with a specific challenge. My current situation involves a structured set of directories on a server. My goal is to populate a dropdown dynamically with this file hierarchy. Upon click ...

``req.body is not being properly populated when data is sent using form-data, causing

When I send data in my Node.js application as raw JSON/x-www-form-urlencoded from Postman, it gets passed successfully. However, when sending the data as form-data from either Postman or my Angular frontend, the req.body is coming back as undefined. I have ...

Update data dynamically on a div element using AngularJS controller and ng-repeat

I am currently navigating my way through Angular JS and expanding my knowledge on it. I have a div set up to load data from a JSON file upon startup using a controller with the following code, but now I am looking to refresh it whenever the JSON object cha ...

The overload signature does not align with the implementation signature when working with subclasses

Uncertain whether it's a typescript bug or an error in my code. I've been working on a plugin that generates code, but upon generation, I encounter the issue This overload signature is not compatible with its implementation signature in the resul ...

Developing React components with Typescript requires careful consideration when defining component props, especially when the component may be

Consider the following scenario: { this.props.userName && <UserProfile userName={this.props.userName} /> In the UserProfile component: interface UserProfileProps { userName: string; } class UserProfile extends React.Component<UserProfile ...

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

Issue reported: "Usage of variable 'someVar' before assignment" ; however, it is being properly assigned before usage

This piece of code showcases the issue: let someVar: number; const someFunc = async () => { someVar = 1; } await someFunc(); if (someVar == 1) { console.log('It is 1'); } As a result, you will encounter ...

What is the best way to compare dates for a deadline using Angular and CSS?

Having recently delved into Angular 8, I just picked up on how to convert timestamps to strings using interpolation and .toMillis. However, I am looking to enhance this feature in my project app. I'm currently working on comparing the date saved in m ...

Emails can be sent through a form without the need for refreshing

I am currently working on a webpage that utilizes parallax scrolling, and the contact box is located in the last section. However, I encountered an issue where using a simple HTML + PHP contact box would cause the page to refresh back to the first section ...

Error in finding the element with Selenium webdriver 2.0 was encountered

I can't seem to find the element with the specified class name. Here's a snippet of the HTML code: <a class="j-js-stream-options j-homenav-options jive-icon-med jive-icon-gear" title="Stream options" href="#"></a> I attempted to gen ...