What is the best way to generate an array of objects by extracting specific properties from another array object?

Question

What is the best way to generate an array of objects by extracting specific properties from another array object?

Here is the information provided:

const cocktail = [
    {
        "idDrink":"13070",
        "strDrink":"Fahrenheit 5000",
        "strGlass":"Shot glass",
        "strInstructions":"Cover bottom of shot gla",
        "strIngredient1":"Firewater",
        "strIngredient2":"Absolut Peppar",
        "strIngredient3":"Tabasco sauce",
        "strIngredient4":null,
        "strMeasure1":"1/2 oz ",
        "strMeasure2":"1/2 oz ",
        "strMeasure3":"1 dash ",
        "strMeasure4":null
    }
]

I aim to create an array of objects that include only the non-null values from each strMeasure[n] and strIngredient[n]:

[
    {
        strMeasure1: value,
        strIngredient1: value
    },
    {
        strMeasure2: value,
        strIngredient2: value
    },
    …
]

Given the above cocktail array, the desired output would be:

[
    {
        measure: '1/2 oz',
        name: 'Firewater'
    },
    {
        measure: '1/2 oz',
        name: 'Absolut Peppar'
    },
    {
        measure: '1 dash',
        name: 'Tobasco sauce'
    },
]

javascript arrays javascript-objects

Answer 1

Answer №1

Here is the solution:

Follow these steps:

Object.entries(cocktail[0]) will give you an array of [key, value] pairs from the data
Use filter to extract Ingredients and Measures while ignoring those with null values
Then, use reduce to construct the final array

For example:

const cocktail = [
    {
        "idDrink":"13070",
        "strDrink":"Fahrenheit 5000",
        "strGlass":"Shot glass",
        "strInstructions":"Cover bottom of shot gla",
        "strIngredient1":"Firewater",
        "strIngredient2":"Absolut Peppar",
        "strIngredient3":"Tabasco sauce",
        "strIngredient4":null,
        "strMeasure1":"1/2 oz ",
        "strMeasure2":"1/2 oz ",
        "strMeasure3":"1 dash ",
        "strMeasure4":null
    }
]
const result = Object.entries(cocktail[0])
.filter(([k,v])=>v && k.match(/^str(Ingredient|Measure)\d+$/))
.reduce((acc, [k, v]) => {
    const [t, n] = k.match(/^str(Ingredient|Measure)(\d+)$/).slice(1);
    acc[n-1] = {...acc[n-1], [t]:v};
    return acc;
}, [])
console.log(result);

You can also achieve this without the filter step

const result = Object.entries(cocktail[0])
.reduce((acc, [k, v]) => {
    if (v) {
        const [t, n] = k.match(/^str(Ingredient|Measure)(\d+)$/)?.slice(1) ?? [] ;
        acc[n-1] = {...acc[n-1], [t]:v};
    }
    return acc;
}, [])
console.log(result);

Answer 2

Here is the solution:

Follow these steps:

Object.entries(cocktail[0]) will give you an array of [key, value] pairs from the data
Use filter to extract Ingredients and Measures while ignoring those with null values
Then, use reduce to construct the final array

For example:

const cocktail = [
    {
        "idDrink":"13070",
        "strDrink":"Fahrenheit 5000",
        "strGlass":"Shot glass",
        "strInstructions":"Cover bottom of shot gla",
        "strIngredient1":"Firewater",
        "strIngredient2":"Absolut Peppar",
        "strIngredient3":"Tabasco sauce",
        "strIngredient4":null,
        "strMeasure1":"1/2 oz ",
        "strMeasure2":"1/2 oz ",
        "strMeasure3":"1 dash ",
        "strMeasure4":null
    }
]
const result = Object.entries(cocktail[0])
.filter(([k,v])=>v && k.match(/^str(Ingredient|Measure)\d+$/))
.reduce((acc, [k, v]) => {
    const [t, n] = k.match(/^str(Ingredient|Measure)(\d+)$/).slice(1);
    acc[n-1] = {...acc[n-1], [t]:v};
    return acc;
}, [])
console.log(result);

You can also achieve this without the filter step

const result = Object.entries(cocktail[0])
.reduce((acc, [k, v]) => {
    if (v) {
        const [t, n] = k.match(/^str(Ingredient|Measure)(\d+)$/)?.slice(1) ?? [] ;
        acc[n-1] = {...acc[n-1], [t]:v};
    }
    return acc;
}, [])
console.log(result);

Answer 3

Answer №2

If you're looking to enhance your code by utilizing the map() method in JavaScript to extract specific key-value pairs from an object within an array, there are multiple approaches you can take. One option is using dot notation to access the desired values within the object. For more in-depth guidance on how to implement these techniques effectively, I've included some valuable resources below:

Extracting value of a property as an array from an array of objects

Converting array of objects to array of values in JavaScript

Tutorial on working with arrays of objects in JavaScript

Answer 4

If you're looking to enhance your code by utilizing the map() method in JavaScript to extract specific key-value pairs from an object within an array, there are multiple approaches you can take. One option is using dot notation to access the desired values within the object. For more in-depth guidance on how to implement these techniques effectively, I've included some valuable resources below:

Extracting value of a property as an array from an array of objects

Converting array of objects to array of values in JavaScript

Tutorial on working with arrays of objects in JavaScript

Answer 5

Answer №3

To begin, create an array of objects containing a 'measure' and 'id' key-value pair. Next, utilize the 'id' to retrieve the corresponding value from the cocktail array.

const cocktail = [{
  "idDrink": "13070",
  "strDrink": "Fahrenheit 5000",
  "strGlass": "Shot glass",
  "strInstructions": "Cover bottom of shot gla",
  "strIngredient1": "Firewater",
  "strIngredient2": "Absolut Peppar",
  "strIngredient3": "Tabasco sauce",
  "strIngredient4": null,
  "strMeasure1": "1/2 oz ",
  "strMeasure2": "1/2 oz ",
  "strMeasure3": "1 dash ",
  "strMeasure4": null
}]
const obj = [];
for (let keys in cocktail[0]) {

  if (keys.includes('strIngredient')) {
    const tempObj = {
      measure: cocktail[0][keys],
      id: keys.charAt(keys.length - 1)
    }
    obj.push(tempObj)
  }
}
obj.forEach((elem) => elem.value = cocktail[0][`strMeasure${elem.id}`])
console.log(obj)

Answer 6

To begin, create an array of objects containing a 'measure' and 'id' key-value pair. Next, utilize the 'id' to retrieve the corresponding value from the cocktail array.

const cocktail = [{
  "idDrink": "13070",
  "strDrink": "Fahrenheit 5000",
  "strGlass": "Shot glass",
  "strInstructions": "Cover bottom of shot gla",
  "strIngredient1": "Firewater",
  "strIngredient2": "Absolut Peppar",
  "strIngredient3": "Tabasco sauce",
  "strIngredient4": null,
  "strMeasure1": "1/2 oz ",
  "strMeasure2": "1/2 oz ",
  "strMeasure3": "1 dash ",
  "strMeasure4": null
}]
const obj = [];
for (let keys in cocktail[0]) {

  if (keys.includes('strIngredient')) {
    const tempObj = {
      measure: cocktail[0][keys],
      id: keys.charAt(keys.length - 1)
    }
    obj.push(tempObj)
  }
}
obj.forEach((elem) => elem.value = cocktail[0][`strMeasure${elem.id}`])
console.log(obj)

Answer 7

Answer №4

Lodash would be great

const drinkRecipe = {"idDrink":"13070","strDrink":"Fahrenheit 5000","strGlass":"Shot glass","strInstructions":"Cover bottom of shot gla","strIngredient1":"Firewater","strIngredient2":"Absolut Peppar","strIngredient3":"Tabasco sauce","strIngredient4":null,"strMeasure1":"1/2 oz ","strMeasure2":"1/2 oz ","strMeasure3":"1 dash ","strMeasure4":null};
    
const findKey = (string) => [...string.matchAll(/(strIngredient|strMeasure)(\d+)/g)].flat();
  
const mapping = { strIngredient: 'name', strMeasure: 'measure' };

const iterator = (acc, value, key) => {
    const [,  keyName, keyNumber] = findKey(key);
    if (value && keyName) {
      acc[keyNumber] ??= {};
      acc[keyNumber][mapping[keyName]] = value;
    }
    return acc;
};

const outputResult = _(drinkRecipe).transform(iterator, {}).values();

console.log(outputResult);

.as-console-wrapper { max-height: 100% !important; top: 0 }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="127e7d7673617a52263c23253c2023">[email protected</a>/lodash.min.js"></script>

Answer 8

Lodash would be great

const drinkRecipe = {"idDrink":"13070","strDrink":"Fahrenheit 5000","strGlass":"Shot glass","strInstructions":"Cover bottom of shot gla","strIngredient1":"Firewater","strIngredient2":"Absolut Peppar","strIngredient3":"Tabasco sauce","strIngredient4":null,"strMeasure1":"1/2 oz ","strMeasure2":"1/2 oz ","strMeasure3":"1 dash ","strMeasure4":null};
    
const findKey = (string) => [...string.matchAll(/(strIngredient|strMeasure)(\d+)/g)].flat();
  
const mapping = { strIngredient: 'name', strMeasure: 'measure' };

const iterator = (acc, value, key) => {
    const [,  keyName, keyNumber] = findKey(key);
    if (value && keyName) {
      acc[keyNumber] ??= {};
      acc[keyNumber][mapping[keyName]] = value;
    }
    return acc;
};

const outputResult = _(drinkRecipe).transform(iterator, {}).values();

console.log(outputResult);

.as-console-wrapper { max-height: 100% !important; top: 0 }

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="127e7d7673617a52263c23253c2023">[email protected</a>/lodash.min.js"></script>

What is the best way to generate an array of objects by extracting specific properties from another array object?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Steps to refresh a variable when the SMS read plugin successfully completes

Acquire the value of ant-design Select dropdown upon hover

Scenario-specific blueprints

What is the correct way to add a period to the end of a formatted text?

Error: TypeScript Knockout table failing to display data

How to enable Autocomplete popper to expand beyond the menu boundaries in Material UI

React UseEffect - Triggering only when data has been updated

initialize input data in vue

Error occurs in Windows script while running a project installed globally

Transferring information to React (Native) hooks in a way similar to how it is done

Default value for the href property in NextJS Link is provided

Save the retrieved data in a variable and pass the entire JSON object as a prop to a React component

Retrieving the $index value for the chosen option in Angular

Utilize the sortable script for dynamically loaded items via AJAX

Convert HTML code into a customized JSON structure

Using ng-pattern to validate that a text field does not conclude with a particular term

Setting attributes on dynamically appended elements using Jquery

How can I pull all data from an array using MongoDB query?

Transferring UTM parameters to a different page via a button click

Creating a custom function in a Node.js application and rendering its output in the front-end interface