Creating a JSON structure using an array in Typescript

Question

Creating a JSON structure using an array in Typescript

Here is an example of my array structure:

[
  {
    "detail": "item1",
    "status": "active",
    "data": "item1_data"
  },
  {
    "detail": "item2",
    "status": "inactive",
    "data": "item2_data"
  },
  {
    "detail": "item3",
    "status": "active",
    "data": "item3_data"
  },
  {
    "detail": "item4",
    "status": "inactive",
    "data": "item4_data"
  }
]

My goal is to transform the above array into this format:

{
  item1: item1_data,
  item2: item2_data,
  item3: item3_data,
  item4: item4_data
}

With a large number of objects in the source array and multiple arrays to work on, I am looking for the most efficient method using typescript. What approach would be best?

javascript arrays json typescript

Answer 1

Answer №1

To simplify the process, you can create an interface to define the layout of your field definitions and then iterate through an array to add each field individually.

interface IFieldDefinition {
  key: string;
  value: string;
}

const fields: IFieldDefinition[] = [
  {
    "key": "field1",
    "value": "field1_value"
  },
  {
    "key": "field2",
    "value": "field2_value"
  },
  {
    "key": "field3",
    "value": "field3_value"
  },
  {
    "key": "field4",
    "value": "field4_value"
  },
  {
    "key": "field5",
    "value": "field5_value"
  }
];

const resultObject: Record<string, string> = {};

for (const field of fields) {
  resultObject[field.key] = field.value;
}

Answer 2

To simplify the process, you can create an interface to define the layout of your field definitions and then iterate through an array to add each field individually.

interface IFieldDefinition {
  key: string;
  value: string;
}

const fields: IFieldDefinition[] = [
  {
    "key": "field1",
    "value": "field1_value"
  },
  {
    "key": "field2",
    "value": "field2_value"
  },
  {
    "key": "field3",
    "value": "field3_value"
  },
  {
    "key": "field4",
    "value": "field4_value"
  },
  {
    "key": "field5",
    "value": "field5_value"
  }
];

const resultObject: Record<string, string> = {};

for (const field of fields) {
  resultObject[field.key] = field.value;
}

Answer 3

Answer №2

Here's a sample code snippet:

const exampleJSON = [
  {
    "key": "value1",
    "action": "perform",
    "result": "success"
  },
  {
    "key": "value2",
    "action": "execute",
    "result": "failure"
  },
  {
    "key": "value3",
    "action": "complete",
    "result": "error"
  }
]

JSON.parse(exampleJSON)

const newObj = {}

for (let j in exampleJSON) {
  const prop = exampleJSON[j].key
  const val = exampleJSON[j].result
  newObj[prop] = val
}

JSON.stringify(newObj)

Using a for loop is preferred in this scenario due to its efficiency with large datasets, as opposed to methods like forEach.

This solution is written in JavaScript, but TypeScript would involve similar logic.

Answer 4

Here's a sample code snippet:

const exampleJSON = [
  {
    "key": "value1",
    "action": "perform",
    "result": "success"
  },
  {
    "key": "value2",
    "action": "execute",
    "result": "failure"
  },
  {
    "key": "value3",
    "action": "complete",
    "result": "error"
  }
]

JSON.parse(exampleJSON)

const newObj = {}

for (let j in exampleJSON) {
  const prop = exampleJSON[j].key
  const val = exampleJSON[j].result
  newObj[prop] = val
}

JSON.stringify(newObj)

Using a for loop is preferred in this scenario due to its efficiency with large datasets, as opposed to methods like forEach.

This solution is written in JavaScript, but TypeScript would involve similar logic.

Answer 5

Answer №3

clever one-liner

const convertJsonToArray = (arr: Object[]) => {
    return Object.fromEntries(arr.map(item => [item["key"], item["value"]]));
}

Answer 6

clever one-liner

const convertJsonToArray = (arr: Object[]) => {
    return Object.fromEntries(arr.map(item => [item["key"], item["value"]]));
}

Creating a JSON structure using an array in Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Issues with updating values in Angular form controls are not being resolved even with the use of [formControl].valueChanges

Establishing a secondary Node.js service for local communication with Parse Server

Converting group by values into JSON in Django is a common task that can be achieved by

Transforming localhost into a server name in a Node.js environment

There seems to be a problem with the sorting functionality on the table in React JS,

Implementing a Reset Button to Clear Checkboxes with PHP or JavaScript

Exploring the differences between two CSS style attributes using JQuery

Interactive navigation through scrolling with PHP onchange event

Response is sent by Sequelize Foreach loop before data is updated

The absence of a defined window - react-draft-wysiwyg integration with Next.js (SSR) is causing issues

Retrieving information from a JSON API using Angular with Typescript

Bring in a library with Angular2 using webpack

Revitalize website when submitting in React.js

Observables and the categorization of response data

Utilizing two imports within the map() method

Angular promise not triggering loop creation

Is it possible to extract form data from a div tag based on its class name?

Creating a dynamic nested form in AngularJS by binding data to a model

Retrieving data from a JSON file at 10-minute intervals with Ajax and visualizing it on Google's globe API

A TypeScript generic function designed to accept either two arrays or two objects, but not a combination of both