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

Nested JSON file retrieval by Axios

Position the text alongside the thumbnail rather than in the center

When attempting to initiate a new session, Webdriver.io receives an HTML response from selenium

The error message "Uncaught ReferenceError: req is not defined with [email protected]" indicates that the variable

modify column data using a JSON object

How can I deliver assets in React without the PUBLIC_URL showing up in the path?

POST request body is not defined

Moving icon that appears when hovering over a menu button

Is there a way to convert a JSON file with a single 'header' row and subsequent 'data' rows, possibly using jq?

Failure to trigger success function during ajax upload

Why is it that I am unable to properly encode this URL in node.js?

Showing Stationary Pictures at Full Size in OpenLayers

When you scroll through the page, white blocks suddenly appear

Is it possible for me to transform this code into a useful helper function?

leveraging embedded jetty for developing a web-based interface

"Send the response in ExpressJS before making a request to loop through the

Can you show me a way to display a dynamically created array component on an Angular2 template html?

Transferring a boolean model value to a JavaScript function triggers a reference to the onchange function

Does this function only function on a singular div?

React Big Calendar - Creating a personalized property for a unique perspective