Iterate through a intricate array of JavaScript objects to extract their values

Question

Iterate through a intricate array of JavaScript objects to extract their values

Looking for ways to extract total calorie and nutrition information from a large document displaying the nutritional data of a simulated recipe.

Please review the codesandbox json file first.

The objective is to capture the total calories and nutritive content of this object;

The recipe includes an array of ingredients, with each ingredient containing two items;

Each item consists of various facts (such as vitamins, nutrition, calories, among others);

Every fact has a corresponding value attached to it;

Despite trying multiple nested array.map functions, only able to retrieve calorie values for each item separately due to the nested map function returning each calorie in individual arrays...

The goal is to store the values of each item (recipe stuff item) in separate arrays like:

const vitaminValues = []
const nutritionValues = []
const caloriesValues = []
const othersValues = []

If successful in achieving this structure, total calories, vitamins, nutrients, and other details can be obtained

Any alternative methods or suggestions are welcome :) Thank you!

Here is the JSON file for a sample recipe: https://codesandbox.io/s/relaxed-brown-zrxnr?fontsize=14&hidenavigation=1&theme=dark

javascript json dictionary object

Answer 1

Answer №1

let jsonData=//your json data here
let vitaminsData = [];
let nutritionData = [];
let caloriesData = [];
let othersData = [];
let vitaminAData = [];

function extractValuesFromJson(object, array) {
  Object.entries(object).map(
    nutrient => nutrient[1].hasOwnProperty("value") && array.push(nutrient[1].value)
  );
}
jsonData.map(datum =>
  datum.stuffs.map(item =>
    item.item.fact.map(fact => {
      extractValuesFromJson(fact.vitamins, vitaminsData);
      extractValuesFromJson(fact.others, othersData);
      caloriesData.push(fact.calories);
      fact.nutritions.map(nutrition => extractValuesFromJson(nutrition, nutritionData));
      vitaminAData.push(fact.vitamins.A.value);
    })
  )
);
console.log("vitaminsData", vitaminsData);
console.log("nutritionData", nutritionData);
console.log("othersData", othersData);
console.log("caloriesData", caloriesData);
console.log("vitaminAData", vitaminAData);

Answer 2

let jsonData=//your json data here
let vitaminsData = [];
let nutritionData = [];
let caloriesData = [];
let othersData = [];
let vitaminAData = [];

function extractValuesFromJson(object, array) {
  Object.entries(object).map(
    nutrient => nutrient[1].hasOwnProperty("value") && array.push(nutrient[1].value)
  );
}
jsonData.map(datum =>
  datum.stuffs.map(item =>
    item.item.fact.map(fact => {
      extractValuesFromJson(fact.vitamins, vitaminsData);
      extractValuesFromJson(fact.others, othersData);
      caloriesData.push(fact.calories);
      fact.nutritions.map(nutrition => extractValuesFromJson(nutrition, nutritionData));
      vitaminAData.push(fact.vitamins.A.value);
    })
  )
);
console.log("vitaminsData", vitaminsData);
console.log("nutritionData", nutritionData);
console.log("othersData", othersData);
console.log("caloriesData", caloriesData);
console.log("vitaminAData", vitaminAData);

Iterate through a intricate array of JavaScript objects to extract their values

Answer №1

Similar questions

Developing a music playlist using javascript/angular (replicating array elements while linking nested objects)

Chained module incorporating a specialized Angular form validation directive

Display a webpage in thumbnail form when hovering the mouse over it

The player clicks once and the game is played two times

Include a "remember me" feature in the Stripe form

Rails : CSS/JavaScript functioning perfectly on local server, facing issues on Heroku deployment

Searching for a specific JSON key within a PostgreSQL JSON column

Angular's focus function poses certain challenges that need to be addressed

Restructure an array of objects into a nested object structure

I'm a bit uncertain about the best placement for my progress bar component during the API call

Export data table from HTML to Excel successfully implemented with C#

Access to the Express Node.js server is restricted to the machine that is currently hosting the server

What is the simplest method for comparing transaction amounts?

I have the latitude and longitude for both the shop and user, and I am looking to display a list of shops in order based

Explaining Vue.js actions and mutations in detail

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Tips for successfully transferring values or parameters within the Bootstrap modal

Constantly encountering crashes with Swifty JSON

Steps for Filling a List Box (combo box) with Data from a Multi-Dimensional Array

Encountering an issue when trying to send data with Axios client to the child component