Steps for inserting a key value pair into an object

Question

Steps for inserting a key value pair into an object

I am working with a Datasource that contains a nested array of objects. I successfully selected key value pairs, and now my goal is to add those values to the top level of the object, outside of the nested object.

Here is the original array:

 data= [
  {
    "flowId": 7079,
    "flowName": "jackson-demo",
    "version": 1,
    "CreatedDate": "2020-04-02",
    "UpdateDate": "",
    "LastRunDate": "2020-04-02",
    "active": false,

"properties": [
  {
    "id": 7080,
    "key": "country",
    "value": "in",
    "category": "General"
  },
  {
    "id": 7081,
    "key": "source",
    "value": "hive",
    "category": "General"
  }
  ]

  },
  {

"flowId": 7079,
"flowName": "jackson-demo",
"version": 1,
"CreatedDate": "2020-04-02",
"UpdateDate": "",
"LastRunDate": "2020-04-02",
"active": false,

"properties": [
  {
    "id": 7080,
    "key": "country",
    "value": "au",
    "category": "General"
  },
  {
    "id": 7081,
    "key": "source",
    "value": "aws",
    "category": "General"
  }
  ]

} ]

The code snippet below allows me to extract the key value pairs:

 for (var i = 0; i < data.length; i++) {
  data[i].properties.forEach((arrayItem, i) => {
    if (arrayItem.key === 'country') {
      console.log('Key: ' + arrayItem.key + ' ' + 'Value: ' + arrayItem.value);
    }
  });
}

Output generated by the code:

Key: country Value: au 
Key: country Value: in

My question now is, how can I insert these extracted values back into the array to achieve the following structure:

data= [
  {
    "flowId": 7079,
    "flowName": "jackson-demo",
    "version": 1,
    "CreatedDate": "2020-04-02",
    "UpdateDate": "",
    "LastRunDate": "2020-04-02",
    "active": false,
    "country": "in"

"properties": [
  {
    "id": 7080,
    "key": "country",
    "value": "in",
    "category": "General"
  },
  {
    "id": 7081,
    "key": "source",
    "value": "hive",
    "category": "General"
  }
  ]

  },
  {

"flowId": 7079,
"flowName": "jackson-demo",
"version": 1,
"CreatedDate": "2020-04-02",
"UpdateDate": "",
"LastRunDate": "2020-04-02",
"active": false,
"country":"au"

"properties": [
  {
    "id": 7080,
    "key": "country",
    "value": "au",
    "category": "General"
  },
  {
    "id": 7081,
    "key": "source",
    "value": "aws",
    "category": "General"
  }
  ]

} ]

javascript angular typescript

Answer 1

Answer №1

Attempt to refresh data[i] by utilizing the spread operator :

 for (var i = 0; i < data.length; i++) {
  data[i].properties.forEach((arrayItem, i) => {
    if (arrayItem.key === 'country') {
      data[i] = { ...data[i] , arrayItem }
    }
  });
}

Answer 2

Attempt to refresh data[i] by utilizing the spread operator :

 for (var i = 0; i < data.length; i++) {
  data[i].properties.forEach((arrayItem, i) => {
    if (arrayItem.key === 'country') {
      data[i] = { ...data[i] , arrayItem }
    }
  });
}

Answer 3

Answer №2

An alternative approach is to utilize the Object.fromEntries method:

for (let entry of data) {
  Object.assign(entry,
    Object.fromEntries(entry.attributes.map(({name, val}) => [name, val]))
  );
}

If you only need to include specific pairs or if you just need one value (e.g., "country"), you can either filter the result of .map or use a simpler programming pattern:

for (let entry of data) {
  entry.country = entry.attributes.find(({name}) => name == "country").val;
}

Answer 4

An alternative approach is to utilize the Object.fromEntries method:

for (let entry of data) {
  Object.assign(entry,
    Object.fromEntries(entry.attributes.map(({name, val}) => [name, val]))
  );
}

If you only need to include specific pairs or if you just need one value (e.g., "country"), you can either filter the result of .map or use a simpler programming pattern:

for (let entry of data) {
  entry.country = entry.attributes.find(({name}) => name == "country").val;
}

Answer 5

Answer №3

Transforming the array by adding a new country property to each object:

const addCountryProperty = rawData => rawData .map (({info, ...restData}) => {
  const countryInfo = info .find (({key}) => key == 'country')
  return {
    ... restData,
    ... (countryInfo ? {country: countryInfo .value} : {}),
    info
  }
})

const rawData = [{id: 1234, name: "example1", country: "US"}, {id: 5678, name: "example2", country: "CA"}];

console .log (
  addCountryProperty (rawData)
)

.as-console-wrapper {min-height: 100% !important; top: 0}

If the inclusion of info in the output is redundant post-extraction, it can be omitted for streamlined processing.

We could potentially modify the original data directly, but let's maintain some decency, shall we?

Answer 6

Transforming the array by adding a new country property to each object:

const addCountryProperty = rawData => rawData .map (({info, ...restData}) => {
  const countryInfo = info .find (({key}) => key == 'country')
  return {
    ... restData,
    ... (countryInfo ? {country: countryInfo .value} : {}),
    info
  }
})

const rawData = [{id: 1234, name: "example1", country: "US"}, {id: 5678, name: "example2", country: "CA"}];

console .log (
  addCountryProperty (rawData)
)

.as-console-wrapper {min-height: 100% !important; top: 0}

If the inclusion of info in the output is redundant post-extraction, it can be omitted for streamlined processing.

We could potentially modify the original data directly, but let's maintain some decency, shall we?

Steps for inserting a key value pair into an object

Answer №1

Answer №2

Answer №3

Similar questions

Angular - ng-class - dynamic progress tracker

A step-by-step guide for setting up MongoDB on a "Blank Node.js Console Application" project in VS2015 with TypeScript

Duplicate values of React object properties when using .push method within a loop

Troubleshooting: AngularJS fails to refresh UI when using SignalR

Converting the Angular 6 HTTP.get response to a string

Tips for creating a VueJS method using JavaScript code?

While the Angular application in VS Code may be successfully compiled, the most recent changes may not appear in the browser

Angular6 HttpClient: Unable to Inject Headers in Get Request for Chrome and IE11

I prefer to conceal the permission-wrapper component tag in the DOM when using Angular

Convert a fresh Date() to the format: E MMM dd yyyy HH:mm:ss 'GMT'z

Discover the method for extracting a URL from a string using jQuery or JavaScript

Error encountered in Angular10: XHR request for POST failed due to browser blocking HTTP Request to a domain with a similar name

Preview your uploaded image before finalizing

What causes the discrepancy between the response.headers in Angular and the response headers shown in the browser's developer

Place a list with scrolling and overflow features side by side

Ways to display an HTML code by utilizing the onclick() function through PHP?

I encountered an issue when trying to import a React.js component in TypeScript. The .d.ts file was created by myself, but I received the error message "Module not found: Can't resolve 'xxx' in 'xxx'"

ng-display does not display content when the condition switches to true

Implementing security measures for my RESTful API using API Key and Secret on Express

Using Jquery to duplicate an element without assigning a different name