5

What I want to do is really simple and there is a syntax error that I can't understand:

I have an array that contains some objects, and I want to create another array using some value of those objects:

let fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}]
let respone = []

// different implementation
fields.map(item => {
   respone.push({item.label: ''}) } )
`Uncaught SyntaxError: Unexpected token .`


fields.map(item => {
   respone = [...response, {item.label: ''}]  } )
`Uncaught SyntaxError: Unexpected token .`



fields.map(item => {
   respone = [...response, {item['label']: ''}]  } )
`Uncaught SyntaxError: Unexpected token [`

and obviously the error is from creating the object {item['label']: ''}. What is the reason for those errors, and what is the best way to create new objects from the existing object values.

Improve this question
1
  • 4
    Try fields.map(({type, label}) => ({[label]: ''})) Commented Jan 26, 2019 at 16:42

4 Answers 4

Reset to default
6

So you have an array of objects, consisting of type and label. You want to make a "composite object" using that array. First thing, you don't want respone to be an array, you want it to be an object. Second, you want to name the key on respone to the value of item.label.

Try this code:

let fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}]

// Create an empty object
let respone = {}

// Iterate over the fields array, using each one to set the  key and value
//  on our respone object.
fields.forEach(item => { respone[item.label] = item.type} );

// Let's see how it looks!
console.log(respone);

Edit: Based on a comment, it doesn't really make sense to use .map() -- the purpose of that is to return a new array, usually of transformed data, based on the array values. In this case, it makes more sense to use Array.forEach(...), the code has been amended to this.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Why use .map ?
True, could just as easily have used any mechanism to loop over the array fields, .forEach would have worked just as well. Good catch, edited the post accordingly. Thank you.
Does .map() and .forEach do iteration in different way or .forEach is just nicer and more readble?
It's about intent. .map() is intended to return a new array of the same length as the original, with the same or modified data. .forEach(), on the other hand, is intended to simply iterate over that array and do something at each iteration.
2

Well the error is how you're trying to define key.

item.label this need to be changed to [item.label] as you want computed key (which needs to evaluated first and than used as key )

let fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}]

let respone = []

fields.forEach(item => {
   respone.push({[item.label]: ''}) } )
   
console.log(respone)

what's the difference between item.label and [item.label] ?

[item.label] will resolve item.label first and than use as key and it need not to be a valid identifier

item.label try to use it directly as key which is not correct JS identifier in this case

for reference read here

Improve this answer

3 Comments

what's the difference between item.label and [item.label]?
[item.label] will resolve item.label first and than use as key item.label try to use it directly as key which is not correct JS identifier in this case
And that's returning an array of named properties, not a compound object built from an array of one-property objects.
1

If you want to transform the array into another array with the same number of elements, then you want map:

let fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}]
let response = fields.map(field => ({[field.label]: ''}));
console.log(response);

The return from map is an array so you don't need to create and push to separate storage; map does that for you.

If you want to create a new object with members based on the array content, reduce is what you want:

let fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}]
let response = fields.reduce((obj, field) => ({...obj, [field.label]: ''}), {});
console.log(response);

(If you don't mind the eslint warning, you can not create the temp objects during the reduce:)

let fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}]
let response = fields.reduce((obj, field) => {
    obj[field.label] = '';
    return obj;
}, {});
console.log(response);
Improve this answer

Comments

0

This is because u r using a "variable" as an object key, you need to use a bracket to tell the browser this is a "variable", otherwise the browser will treat it as a string, but you can not use a "." in a key, so it throw an error "Uncaught SyntaxError: Unexpected token .":

You should write like this:

var fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}];
var respone = [];

fields.map(item => {
  respone.push({
    [item.label]: ''
  })
});

console.log(respone);

Or if you can't understand, this should help you to understand:

var fields = [{type:'a',label:'email'},{type:'b',label:'name'},{type:'a',label:'tel'}];
var respone = [];

fields.map(item => {
  let obj = {};
  obj[item.label] = '';
  respone.push(obj);
});

console.log(respone);

Improve this answer

1 Comment

You should use forEach (which returns nothing) instead of map (which returns a new array).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.