Break down one object into an array consisting of multiple objects

I have a single object in the following array:

[{"IP_Address":"33.4.160.5","originEmailAddress":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f050e020a1c2f18060303061c410c0002">[email protected]</a>"}]

I am looking to destructure it into a two-element array of objects like this:

[{"IP_Address: "33.4.160.5"},{"originEmailAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb919a969e88bb8c9297979288d5989496">[email protected]</a>"}]

Is there an efficient way to achieve this? While I know how to transform it back to the original format, as shown below:

let keys = Object.keys(test[0]);
let values = Object.values(test[0]);

const merged = keys.reduce((obj, key, index) => ({ ...obj, [key]: values[index] }), {});

I am struggling with reducing it into an array of two objects. Any insights would be greatly appreciated.

javascript

Answer №1

Here is the solution:

const data = [{"IP_Address":"33.4.160.5","originEmailAddress":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="076d666a62e56c6661">[email protected]</a>"}];

const updatedData = Object.keys(data[0]).map(item => ({ [item]: data[0][item] }));

console.log(updatedData);

Answer №2

I would script

For each object in the array, create a new entry and then convert it into an object using Object.fromEntries()

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

Angular2 Window Opener

Trying to establish communication between a child window and parent window in Angular 2, but I'm stuck on how to utilize window.opener for passing a parameter to Angular 2. In my previous experience with Angular 1.5, I referenced something similar he ...

javascriptangular

Vue 3 gracefully handles errors by displaying an alternative component

I am currently developing a rendering library for my Vue 3 + Vite project. Essentially, I have a JSON array of products which I pass to a special <Render :products /> component. This Render component reads all the JSON products and converts them in ...

javascriptvue.jsvuejs3vite

What is the proper way to retrieve the Nuxt context within the fetch() hook?

Is there a way to access the props within an async fetch() function when also using async fetch(context)? I'm trying to figure out how to work with both simultaneously. ...

javascriptvue.jsnuxt.js

Obtain the HTML source code for a webpage that has been scrolled down using Python web scraping with Selenium

Even after executing a script to scroll down, I am only able to retrieve the initial html code containing 11 hotels. How can I access the entire data source code by scrolling down to scrape all the available hotels? If the driver.execute_script is suppose ...

javascriptpythonseleniumweb-scraping

I possess a pair of items that require merging together while combining any overlapping key values in their properties

I have a scenario where I need to merge two objects and concatenate strings if they have the same key. obj1 = { name: 'John', address: 'Cairo' } obj2 = { num : '1', address: 'Egypt' } After merging, the r ...

javascriptangulartypescriptecmascript-6lodash

Analyzing the DOM content loading time for web pages generated using AJAX technology

When analyzing website performance, I rely on window.performance.timing. However, this method falls short when it comes to measuring the performance of webpages loaded through ajax calls. For instance, websites built with frameworks like angularjs often lo ...

javascriptajax

Why does the AngularJS ngRepeat filter permanently remove null values?

Check out this JSFiddle demonstration I created to illustrate the problem: http://jsfiddle.net/s6Lj2/2/ Observe that in the dataset $scope.places = [{ name: 'Chicago', status: 'Active', analyst: 'Sam', recor ...

javascriptarrayshtmlangularjs

Easy steps for importing node modules in TypeScript

I'm currently navigating the world of TypeScript and attempting to incorporate a module that is imported from a node module. I have chosen not to utilize webpack or any other build tools in order to maintain simplicity and clarity. Here is the struct ...

javascriptnode.jstypescriptnpmes6-modules

The sequence of HTML5 DragDrop Enter and Leave events occur consecutively

I am encountering a problem with a simple drag & drop effect where the class name is changed when the drag enters or leaves, resulting in continuous entering and leaving. Take a look at this basic HTML code: <div class="box"> <div cla ...

javascripthtmlcssdrag-and-dropdraggable

What is the best way to locate this particular element on the webpage?

After using the right-click and selecting inspect element, I located the code of the desired element on the webpage: <input type="text" ng-if="!editing" ng-model="item.Price" ng-click="inputFocus()" ts="" required="" placeholder="قیمت :" class="ng- ...

javascriptangularseleniumxpathcss-selectors

Material User Interface, MUI, Modal, Back to Top Scroll按钮

After spending some time experimenting with scrollTop and the Dialog component (a fullscreen fixed modal) from Material-ui, I found that I couldn't quite get scrollTop to function properly. Whenever I clicked the "go down" button, it would either retu ...

javascriptcssreactjsmaterial-ui

Creating a welcome screen that is displayed only the first time the app is opened

Within my application, I envisioned a startup/welcome page that users would encounter when the app is launched. They could then proceed by clicking a button to navigate to the login screen and continue using the app. Subsequently, each time the user revisi ...

javascriptangulartypescriptionic-framework

Creating custom CSS for Styled Components in ReactJS

I'm struggling with CSS in React using styled components. Below is the code snippet I am working with: import React from 'react'; import { Navbar, Container, Row, Col } from 'reactstrap'; import styled from 'styled-components& ...

javascriptcssreactjsjsxstyled-components

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Hello there, Let me paint you a picture: for (j = 0; j < btnArr.length; j++) { var btn = document.createElement("button"); btn.addEventListener("click", function() { press(this, j) }, false); div.appendChild(btn); } The issue at hand is t ...

javascriptvariablesevents

Turn off email alerts for items and folders in ALFRESCO 5.2

Here's a snippet of JS code I created to toggle notifications with a button click: (Action.min.js): var me = this, jsNode = record.jsNode, content = jsNode.isContainer ? "folder" : "document"; if (jsNode.hasAspect("cm:emailed") ...

javascriptnode.jsalfrescoaspect

Switch up div containers with JavaScript based on the set array order of elements?

As I work on creating a list that calculates the sum of selected numbers, I encountered an issue with rearranging the items. Despite successful functionalities like adding images with names, changing languages, and performing calculations, the page keeps r ...

javascripthtml

"Image Reactor: Unleashing the Power

I'm struggling to understand why my relative path image loading isn't functioning correctly. The assets are located within the src folder in my working directory, but for some reason, they're not displaying as expected. When I directly impo ...

javascriptreactjsimage

How can I dynamically apply an active class when clicking on a group of buttons?

Iterating through the buttons array, I retrieve three buttons. My goal is to determine which button has been clicked and apply an active class to it. import React from "react"; import { useState } from "react"; import style from "./years.module.scss"; co ...

javascriptreactjsecmascript-6

I am having trouble with retrieving and showing Json data in a table using axios within a React component

Struggling to access JSON data using hooks to display it in the <p> tag but encountering an error - "TypeError: states.map is not a function". I attempted utilizing Array.from() to convert my JSON to an array, yet it neither displayed anything nor pr ...

javascriptreactjsreact-hooks

Why isn't my React image updating its source right away? What are some solutions to this issue?

I currently have a basic <img> tag with a specified src attribute. <img src={src} /> When I update the src attribute from, let's say /1.jpg to /2.jpg, there is a delay in loading the new image. React still displays the old image (/1.jpg) ...

javascriptreactjs