How to concat and find from json array in lodash?

Question

I have requirement where i need all the state to concatenate with each region i have created an example in below:

But i am not sure is this the best way in lodash or any other inbuilt method can be used to create more efficiently.

 var data = [ { "region": "South", "state": "Wyoming", "sales": 1803 }, { "region": "South", "state": "Idaho", "sales": 3380 }, { "region": "South", "state": "New Mexico", "sales": 2779 }, { "region": "South", "state": "Montana", "sales": 3589 }, { "region": "South", "state": "Utah", "sales": 11223 }, { "region": "South", "state": "Oregon", "sales": 17431 }, { "region": "South", "state": "Colorado", "sales": 72110 }, { "region": "South", "state": "Arizona", "sales": 45283 }, { "region": "South", "state": "Washington", "sales": 88656 }, { "region": "South", "state": "California", "sales": 55731 }, { "region": "West", "state": "Wyoming", "sales": 1603 }, { "region": "West", "state": "New Mexico", "sales": 4779 }, { "region": "West", "state": "Montana", "sales": 5589 }, { "region": "West", "state": "Utah", "sales": 11223 }, { "region": "West", "state": "Nevada", "sales": 16729 }, { "region": "West", "state": "Oregon", "sales": 17431 }, { "region": "West", "state": "Colorado", "sales": 32110 }, { "region": "West", "state": "Arizona", "sales": 35283 }, { "region": "West", "state": "Washington", "sales": 138656 }, { "region": "West", "state": "California", "sales": 457731 } ]; var cat = []; _.forEach(_.uniq(_.map(data, 'region')), function(o){ _.forEach(_.uniq(_.map(data, 'state')), function(l) { const fin = _.find(data, function(f) { return f.state == l && f.region == o; }); if (_.isUndefined(fin)) { cat.push({'state': o + " - " + l, 'region': o, 'sales': 0}); } else { cat.push({'state': o + " - " + l, 'region': o, 'sales': fin.sales}); } }); }); console.log(cat); 

 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script> 

I have used this because it seems like some state is missing from south region in above data and some state missing from west region. But in my case i want equal state data in both region, I have used lodash function but i am not sure is this the best approach or not.

Answer 1

That is very basic JavaScript, no Lodash or jQuery needed.

You can either update the existing array:

 var data=[{"region":"South","state":"Wyoming","sales":1803},{"region":"South","state":"Idaho","sales":3380},{"region":"South","state":"New Mexico","sales":2779},{"region":"South","state":"Montana","sales":3589},{"region":"South","state":"Utah","sales":11223},{"region":"South","state":"Oregon","sales":17431},{"region":"South","state":"Colorado","sales":72110},{"region":"South","state":"Arizona","sales":45283},{"region":"South","state":"Washington","sales":88656},{"region":"South","state":"California","sales":55731},{"region":"West","state":"Wyoming","sales":1603},{"region":"West","state":"New Mexico","sales":4779},{"region":"West","state":"Montana","sales":5589},{"region":"West","state":"Utah","sales":11223},{"region":"West","state":"Nevada","sales":16729},{"region":"West","state":"Oregon","sales":17431},{"region":"West","state":"Colorado","sales":32110},{"region":"West","state":"Arizona","sales":35283},{"region":"West","state":"Washington","sales":138656},{"region":"West","state":"California","sales":457731}]; for (let d of data) { d.state = `${d.region} - ${d.state}`; } console.log(data); 

Or you can create a new array:

 var data=[{"region":"South","state":"Wyoming","sales":1803},{"region":"South","state":"Idaho","sales":3380},{"region":"South","state":"New Mexico","sales":2779},{"region":"South","state":"Montana","sales":3589},{"region":"South","state":"Utah","sales":11223},{"region":"South","state":"Oregon","sales":17431},{"region":"South","state":"Colorado","sales":72110},{"region":"South","state":"Arizona","sales":45283},{"region":"South","state":"Washington","sales":88656},{"region":"South","state":"California","sales":55731},{"region":"West","state":"Wyoming","sales":1603},{"region":"West","state":"New Mexico","sales":4779},{"region":"West","state":"Montana","sales":5589},{"region":"West","state":"Utah","sales":11223},{"region":"West","state":"Nevada","sales":16729},{"region":"West","state":"Oregon","sales":17431},{"region":"West","state":"Colorado","sales":32110},{"region":"West","state":"Arizona","sales":35283},{"region":"West","state":"Washington","sales":138656},{"region":"West","state":"California","sales":457731}]; var newData = data.map(d => ({...d, state: `${d.region} - ${d.state}`})); console.log(newData); 

References:

• for...of
• Array#map()
• Arrow functions
• Spread syntax

Answer 2

You can achieve by only one for loop

 const array = [{ region: 'South', state: 'Wyoming', sales: 1803, }, { region: 'South', state: 'Idaho', sales: 3380, }, { region: 'South', state: 'New Mexico', sales: 2779, }, { region: 'South', state: 'Montana', sales: 3589, }, { region: 'South', state: 'Utah', sales: 11223, }, { region: 'South', state: 'Oregon', sales: 17431, }, { region: 'South', state: 'Colorado', sales: 72110, }, { region: 'South', state: 'Arizona', sales: 45283, }, { region: 'South', state: 'Washington', sales: 88656, }, { region: 'South', state: 'California', sales: 55731, }, { region: 'West', state: 'Wyoming', sales: 1603, }, { region: 'West', state: 'New Mexico', sales: 4779, }, { region: 'West', state: 'Montana', sales: 5589, }, { region: 'West', state: 'Utah', sales: 11223, }, { region: 'West', state: 'Nevada', sales: 16729, }, { region: 'West', state: 'Oregon', sales: 17431, }, { region: 'West', state: 'Colorado', sales: 32110, }, { region: 'West', state: 'Arizona', sales: 35283, }, { region: 'West', state: 'Washington', sales: 138656, }, { region: 'West', state: 'California', sales: 457731, }]; const customResult = []; for (let i = 0; i < array.length; i += 1) { const element = array[i]; const result = { ...element }; result.state = `${element.region} - ${element.state}`; customResult.push(result); } console.log(customResult); 

Answer 3

If you want to mutate the existing array use a loop as in the other answer. If you'd prefer to return an array of new updated objects you can use map :

 const data = [{ "region": "South", "state": "Wyoming", "sales": 1803 }, { "region": "South", "state": "Idaho", "sales": 3380 }]; const out = data.map(obj => { // Destructure the various props from each object const { region, state, sales } = obj; // Create the new state value const newState = `${region} - ${state}`; // Return each updated object return { state: newState, region, sales }; }); console.log(out); 

Further documentation

• Destructuring

• Template literals