Generate a fresh set of key-value pairs using ES6

Looking to create a new object with updated key-value pairs?

let input= {
"Bhang Seeds": 120,
"CRON": 300,
"F1 Hybrid": 180,
}

Here's the expected output:

[
{
variety: 'Bhang Seeds',
Quantity:180
},
{
variety: 'CRON',
Quantity:300
},
{
variety: 'F1 Hybrid',
Quantity:180
}
]

I've managed to separate keys and values, but how do I return them with new key-value pairs?

const varietyKey = Object.keys(response).map(v => v);
console.log(varietyKey);
const varietyValue: any = Object.values(response).map(v => v);
console.log(variety);

Answer №1

To retrieve the keys from an object, you can utilize the Object.key method. This allows for easy iteration over the object to construct the desired output.

var data = {
  'Red Roses': 25,
  'White Lilies': 40,
  'Yellow Tulips': 15,
  'Purple Orchids': 30,
  'Blue Hydrangeas': 20
}

const result = Object.keys(data).map(key => ({
 flower: key,
 Quantity: data[key] 
}))

console.log(result)

Answer №2

Perhaps you should consider using Object.entries in the following way:

Try this code snippet: const updatedArray = Object.entries(yourObject).map(([key, val]) => ({type: key, amount:val}))

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

Using the Google Chrome console, execute a command on each page within a specified website

While browsing a website, I noticed a bug that required me to manually run a JavaScript function each time I navigated to a different page in order for the site to work smoothly. Is there a way to automate this process upon page load? I am using Google C ...

Error: The JavaScript in Bootstrap requires jQuery version 1.9.1 or newer. Please make sure you are using the correct version

I've been attempting to access using Java code and the latest release of HTMLUnit (version 2.37.0, which I sourced from a jar download website along with all its dependencies). final WebClient webClient = new WebClient(); webClient.getOptions().setT ...

Searching through a json object using typescript

While attempting to retrieve JSON data from a URL, I encountered a particular issue. The problem lies in the fact that each row in the Datarows array contains 5 rows, each row consisting of 47 cells. Out of these 47 cells in each row, I am specifically in ...

Issue with Mobile Touch Screen Preventing Vertical Scrolling

Currently experiencing difficulties with a div element that is not allowing touch and vertical scroll on mobile devices. Although scrolling works fine with the mouse wheel or arrow keys, it does not respond to touch. Have tested this on various devices and ...

Tips for refreshing a DOM element after inserting with jQuery

I'm trying to update the LI element after using the insertBefore function in jQuery. The issue arises after adding new elements to UL where I encounter difficulty deleting the same element (using emailTagRemove). Check out the demo to see the proble ...

Dispose of jQuery instance when it is no longer required

Encountered an issue with jQuery: There are multiple div containers on a page with the class "stackgo" and different data attributes. For example: <div class=\"stackgo\" data-an=\"HEY\" data-ms=\"HO\" data-me=\"HM&bso ...

javascript - Add a function to an array, iterate through, and delete once executed

I've been attempting to develop an array that stores all pending error messages appearing on the DOM using jQuery. My goal is to iterate through the array to check for any error messages to display, and then remove them after execution. However, I&ap ...

Neglecting to review the CSS - embracing ejs layouts in Express

I am encountering an issue with the express ejs layouts where only the mainPage is able to read the CSS, while the other pages are unable to do so (even though the HTML reads it). Additionally, if I want to use another layout such as "layout2.ejs", what s ...

Employing JavaScript to insert a JSON value as a parameter in an HTML element's attribute

In a JSON file, I have "img" properties with .jpg file paths as their values (e.g "images/image.jpg"). I am attempting to insert these values into the 'src' attribute of existing HTML elements. Below are my attempts so far: I tried creating te ...

Dealing with error handling in NUXT using asyncData and Vue actions

The URL I am trying to access is http://mywebsite.com/[category that doesn't exist]. Despite the code snippet provided below, I am unable to reach the catch block in asyncData. async asyncData({ params, store }) { try { await store.dispatch(&ap ...

State is not being updated by useState after the second API call in MUI and ReactJS

I encountered an issue while using the Material-UI Autocomplete component for a search box. The problem arises when fetching options from an API and passing them to the component. Initially, the dropdown displays the options correctly. However, upon closin ...

Retrieve Textures From an Assortment

Greetings to all the readers here! I am in the process of developing a website where I want to implement a feature that allows me to scroll through "cards" arranged in a single line, visible from an isometric side view. I have managed to set up the scene ...

Node: permit the event loop to run during lengthy tasks and then return

Currently, I am facing an issue with a function that works like this: function longFunc(par1,par2) { var retVal = [], stopReq = false; function evtLs() { stopReq = true; } something.on("event", evtLs); for(var i=0; ...

Removing a record from a database using ASP.NET MVC 5

Looking for some insight on the behavior of my JavaScript and Action in the Controller. Below are the current code snippets: Index.chtml @model IEnumerable<WebSensoryMvc.Models.SessionData> @{ ViewBag.Title = "Index"; Layou ...

The V-model fails to reflect changes when the checkbox list is updated

I am facing an issue with my checkboxes that are generated dynamically in a component using a v-for loop. Once a checkbox is checked, it is added to an array of selected checkboxes. The problem arises when a checked checkbox is removed - the v-model still ...

Creating a Countdown in Javascript Using a Variable

I want the date to change from the first date to the second date. At the start, it should display 'Starts:' in bold followed by the remaining time. Once it switches to the second date, it should show 'Ends:' in bold and then the remaini ...

Guide for overlaying text on an image in react native

Is there a way to vertically align text over an image in react native? I came across this helpful guide, but I encountered difficulties trying to implement it. Specifically, I couldn't figure out how to nest the text tag within the Image tag. Below is ...

Include the server $HOSTNAME in the JavaScript file of the client

Currently, I have a JavaScript code running on the client-side which contains a websocket address for server communication: new WebSocket("ws://localhost:3000/") Everything is operating fine, but my goal is to replace 'localhost' with the $HOST ...

Ending JavaScript promises

I am currently utilizing the Google JS closure library which can be found at https://developers.google.com/closure/library/ Below is the code snippet that I have: if (endDate >= wap.com.ifx.util.IfxComponentUtil.yyyymmdd(currentDate) && goog.o ...

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...