Is it possible to modify the object's key value when generating an array value with the map function in React?

I have the array object data stored in a variable called hi[0].child.

hi[0].child = [
    {code: "food", name: "burger"},
    {code: "cloth", name: "outer"},
    {code: "fruit", name: "apple"},
]

My goal is to create a new variable named hello, change the key values of hi[0].child, and store it in the hello variable.

Specifically, I want to change the key value of code to value and name to label. The expected values are as follows:

expected answer 

hello = [
    {label: "burger", value: "food"},
    {label: "outer", value: "cloth"},
    {label: "apple", value: "fruit"},

]

However, I encounter errors when using my code.

I receive the message 'Did not expect a type annotation here.'

How can I correct my code? Here is my code snippet:

let hello = []


hi[0].child.map((v) => {
hello.push(label: v.name, value: v.code)
})

Answer №1

Don't forget to include the curly brackets for the object, it should look like this:

hello.push({ label: v.name, value: v.code })
.

Moreover, map isn't the most suitable method to use in this scenario; consider using forEach alternatively or utilize the value returned from map (refer to the example below).

const data = [
  { code: "food", name: "burger" },
  { code: "cloth", name: "clothes" },
  { code: "fruit", name: "banana" },
];

const updatedData = data.map((v) => ({ label: v.code, value: v.name }));

console.log(updatedData);

Answer №2

Update the code as shown below

let greetings = []
hello[0].children.forEach((item) => {
  greetings.push({text: item.name, num: item.id})
})

Make sure to provide an object

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 NodeJS to store the value from a callback function in a variable external to the function

I am facing a situation where I need to assign the value inside a callback function to a variable outside of it. Below is an example using child_process. callback.js let result; require('child_process').spawn('python', ['./hello.py ...

Switch website address without redirecting via JavaScript

I am seeking information on how to update the URL without a full page reload, similar to the functionality seen on this website . When clicking on tabs, the URL changes seamlessly without refreshing the entire page. While some sources suggest that this m ...

ReactJS component's function become operational only after double tapping

Dealing with the asynchronous nature of react hook updates can be a common challenge. While there are similar questions out there, I'm struggling to find a solution for my specific case. The issue arises when trying to add a new product object into a ...

Utilizing onClick to target data within a .map function

I am struggling with the code provided below: const test = (e) => { console.log('example:', e.target.item.attributes.dataIWant); } {records.map((item, index) => { return ( <> <Accordion key={index} ...

Choose images at random from an array within a React Native application

I've been working on a feature that involves randomly selecting an image from an array of images. However, I keep running into the issue of getting an "invalid props source supplied to image" error. My goal is to display a different random image each ...

Execute various settimeout or display functions on various elements of a webpage

Just a heads up, I'm not really experienced in development. More on the newbie side of things, but eager to learn. I've been looking for an answer to my question, but so far haven't come across anything that fits my specific situation. It m ...

Avoiding special characters in URLs

Is there a way to properly escape the & (ampersand) in a URL using jQuery? I have attempted the following methods: .replace("/&/g", "&amp;") .replace("/&/g", "%26") .replace("/&/g", "\&") Unfortunately, none of these are y ...

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

How can you use JavaScript to identify resize or zoom changes across all ancestor DOM elements?

I have a DOM element that consists of a chart. <div id="plot1" class='plot-chart'></div> This specific DIV can be nested within various other DIVs. <div id="one" style="width:100%;height:100%;zoom:0.9;"> <div id="two"& ...

Leverage the power of Angular CLI within your current project

I am currently working on a project and I have decided to utilize the angular cli generator. After installing it, I created the following .angular-cli file: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": " ...

Avian-themed masking feature for jCarousel

Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

I have encountered an issue that I need assistance with: <input title="1" type="text" class="email"> <input title="2" type="text" class="email"> <input title="3" type="text" class="email"> The HTML code above shows my attempt to extract ...

Exploring the Comparison of Arrays in AngularJS

I am currently working with two arrays: one for Usernames and another for userRoles. The structure of the arrays is as follows: Usernames = [ { "id": 1, "userName": "Jack", "description": "jack is a nice guy", "userRoleIds": [ 1 ...

Create a nested array of subcategories within an array object

Currently, I am working on integrating Django Rest and Angular. The JSON array received from the server includes category and subcategory values. My goal is to organize the data such that each category has its related subcategories stored as an array withi ...

jqgrid now features inline editing, which allows for the posting of only the data that

My jqGrid includes editable columns, and I am looking for a way to only post the data of columns where changes have been made. Here is an example of my colModel: colModel: [{ name: 'I_PK', index: 'u.I_PK ...

Axios failing to include Content-Type in header

I have set up an Odoo instance in the backend and developed a custom module that includes a web controller. Here is the code for the web controller: Web Controller # -*- coding: utf-8 -*- from odoo import http import odoo from odoo.http import Response, ...

How can CakePhp's $ajax->link be used to manipulate the result on the complete action?

Recently, I've started working with cakePhp to handle ajax requests using prototype. While my controller is returning the correct value, I'm struggling to figure out how to properly handle it when it comes back looking like this: <?php echo ...

Ways to extract information from a JSON array based on its length and content

Here is an example of some data: { "_id": ObjectId("528ae48e31bac2f78431d0ca"), "altitude": "110", "description": [ { "id": "2", "des": "test" } ], "id": "1", "latitude": "24.9528802429251", ...

The file field appears to be empty when sending a multipart/form-data request via AJAX

I'm encountering an issue when attempting to submit a multipart/form-data using AJAX. Here is the HTML code snippet: <form id='form_foto' method='post' enctype='multipart/form-data'> <input type='hidden ...

What is the reason for utilizing letters as function name and parameters in JavaScript?

(function (a) { var r = a.fn.domManip, d = "_tmplitem", q = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /, b = {}, f = {}, e, p = { key: 0, data: {} }, h = 0, c = ...