Integrate CalorieNinja API

[bortami]

Fetch food item data from the CalorieNinja API to get calorie and nutritional information. Implement a search function for users to find food items by name.

Tasks:

• Set up API call to fetch food data.
• Create a function to handle the search query input.
• Display search results (name, calories, etc.) in a list.

[KristoferNorwood]

I can work on this. 👍🏻

[bshambaugh]

This works in node:

const axios = require('axios');

const apiKey = 'RN2x+V3YhTirpJM0ExxClQ==e1GElmIAUMseOMO5';
const query = '12oz onion and a tomato';

axios.get('https://api.calorieninjas.com/v1/nutrition?query='+query, {
//axios.get('https://api.calorieninjas.com/v1/nutrition?query=12oz%20onion%20and%20a%20tomato', {
  headers: {
    'X-API-Key': apiKey
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

[bshambaugh]

Maybe this helps too: https://medium.com/@amavictor/how-to-use-react-query-axios-and-a-custom-request-processor-to-transform-your-data-2a9f0c9f5bf0

[bshambaugh]

the default response type in axios is json . https://axios-http.com/docs/req_config

compare this thread to the ajax response with https://calorieninjas.com/api#2b

[bshambaugh]

this is the response from running:

{
  items: [
    {
      name: 'onion',
      calories: 152,
      serving_size_g: 340.19399999999996,
      fat_total_g: 0.6,
      fat_saturated_g: 0.1,
      protein_g: 4.7,
      sodium_mg: 10,
      potassium_mg: 119,
      cholesterol_mg: 0,
      carbohydrates_total_g: 34.3,
      fiber_g: 4.8,
      sugar_g: 16
    },
    {
      name: 'tomato',
      calories: 18.2,
      serving_size_g: 100,
      fat_total_g: 0.2,
      fat_saturated_g: 0,
      protein_g: 0.9,
      sodium_mg: 4,
      potassium_mg: 23,
      cholesterol_mg: 0,
      carbohydrates_total_g: 3.9,
      fiber_g: 1.2,
      sugar_g: 2.6
    }
  ]
}

[bshambaugh]

I'm not sure how to handle the data .... but I have been experimenting

[bshambaugh]

code:

 const obj = response.data;
console.log(Object.keys(obj));
console.log(obj.items[0]);
console.log(obj.items[0]['name']);
console.log(obj.items[0]['serving_size_g']);
console.log(obj.items[0]['fat_total_g']);
console.log(obj.items[0]['fat_saturated_g']);
console.log(obj.items[0]['protein_g']);
console.log(obj.items[0]['sodium_mg']);
console.log(obj.items[0]['potassium_mg']);
console.log(obj.items[0]['cholesterol_mg']);
console.log(obj.items[0]['carbohydrates_total_g']);
console.log(obj.items[0]['fiber_g']);
console.log(obj.items[0]['sugar_g']);

response:

[ 'items' ]
{
  name: 'onion',
  calories: 152,
  serving_size_g: 340.19399999999996,
  fat_total_g: 0.6,
  fat_saturated_g: 0.1,
  protein_g: 4.7,
  sodium_mg: 10,
  potassium_mg: 119,
  cholesterol_mg: 0,
  carbohydrates_total_g: 34.3,
  fiber_g: 4.8,
  sugar_g: 16
}
onion
340.19399999999996
0.6
0.1
4.7
10
119
0
34.3
4.8
16

[bshambaugh]

code

const axios = require('axios');

const apiKey = 'RN2x+V3YhTirpJM0ExxClQ==e1GElmIAUMseOMO5';
const query = '12oz onion and a tomato';

axios.get('https://api.calorieninjas.com/v1/nutrition?query='+query, {
  headers: {
    'X-API-Key': apiKey
  }
})
.then(response => {
 const obj = response.data; 
console.log(Object.keys(obj));
console.log(obj.items[0]);
console.log(obj.items[0]['name']);
console.log(obj.items[0]['serving_size_g']);
console.log(obj.items[0]['fat_total_g']);
console.log(obj.items[0]['fat_saturated_g']);
console.log(obj.items[0]['protein_g']);
console.log(obj.items[0]['sodium_mg']);
console.log(obj.items[0]['potassium_mg']);
console.log(obj.items[0]['cholesterol_mg']);
console.log(obj.items[0]['carbohydrates_total_g']);
console.log(obj.items[0]['fiber_g']);
console.log(obj.items[0]['sugar_g']);
console.log(obj.items.length);
for (let i = 0; i < obj.items.length; i++) {
    console.log('item number:',i);
    console.log('the name is:',obj.items[i]['name']);
    console.log('the serving size in gram is',obj.items[i]['serving_size_g']);
    console.log('the total fat in grams is:',obj.items[i]['fat_total_g']);
    console.log('the total saturated fat in grams is:',obj.items[i]['fat_saturated_g']);
    console.log('the total grams of protein is:',obj.items[i]['protein_g']);
    console.log('the total grams of sodium is:',obj.items[i]['sodium_mg']);
    console.log('the total grams of potassium is:',obj.items[i]['potassium_mg']);
    console.log('the total grams of cholesterol is:',obj.items[i]['cholesterol_mg']);
    console.log('the total grams of carbohydrate is:',obj.items[i]['carbohydrates_total_g']);
    console.log('the total grams of fiber is:',obj.items[i]['fiber_g']);
    console.log('the total grams of sugar is:',obj.items[i]['sugar_g']);
    console.log('\n');
}

})
.catch(error => {
  console.error(error);
});

response

[ 'items' ]
{
  name: 'onion',
  calories: 152,
  serving_size_g: 340.19399999999996,
  fat_total_g: 0.6,
  fat_saturated_g: 0.1,
  protein_g: 4.7,
  sodium_mg: 10,
  potassium_mg: 119,
  cholesterol_mg: 0,
  carbohydrates_total_g: 34.3,
  fiber_g: 4.8,
  sugar_g: 16
}
onion
340.19399999999996
0.6
0.1
4.7
10
119
0
34.3
4.8
16
2
item number: 0
the name is: onion
the serving size in gram is 340.19399999999996
the total fat in grams is: 0.6
the total saturated fat in grams is: 0.1
the total grams of protein is: 4.7
the total grams of sodium is: 10
the total grams of potassium is: 119
the total grams of cholesterol is: 0
the total grams of carbohydrate is: 34.3
the total grams of fiber is: 4.8
the total grams of sugar is: 16

item number: 1
the name is: tomato
the serving size in gram is 100
the total fat in grams is: 0.2
the total saturated fat in grams is: 0
the total grams of protein is: 0.9
the total grams of sodium is: 4
the total grams of potassium is: 23
the total grams of cholesterol is: 0
the total grams of carbohydrate is: 3.9
the total grams of fiber is: 1.2
the total grams of sugar is: 2.6

[bshambaugh]

Code:

const axios = require('axios');

const apiKey = 'RN2x+V3YhTirpJM0ExxClQ==e1GElmIAUMseOMO5';
const query = '12oz onion and a tomato';

axios.get('https://api.calorieninjas.com/v1/nutrition?query='+query, {
  headers: {
    'X-API-Key': apiKey
  }
})
.then(response => {
 const obj = response.data; 
console.log(Object.keys(obj));
console.log(obj.items[0]);
console.log(obj.items[0]['name']);
console.log(obj.items[0]['serving_size_g']);
console.log(obj.items[0]['fat_total_g']);
console.log(obj.items[0]['fat_saturated_g']);
console.log(obj.items[0]['protein_g']);
console.log(obj.items[0]['sodium_mg']);
console.log(obj.items[0]['potassium_mg']);
console.log(obj.items[0]['cholesterol_mg']);
console.log(obj.items[0]['carbohydrates_total_g']);
console.log(obj.items[0]['fiber_g']);
console.log(obj.items[0]['sugar_g']);
console.log(obj.items.length);
let totalFat = 0.0, totalSaturatedFat = 0.0, totalProtein = 0.0, totalSodium = 0.0, totalPotassium = 0.0, totalCholesterol = 0.0, totalCarbohydrates = 0.0, totalFiber = 0.0, totalSugar = 0.0;
//let totalFat, totalSaturatedFat, totalProtein, totalSodium, totalPotassium, totalCholesterol, totalCarbohydrates, totalFiber, totalSugar = 0.0;
for (let i = 0; i < obj.items.length; i++) {
    console.log('item number:',i);
    console.log('the name is:',obj.items[i]['name']);
    console.log('the serving size in gram is',obj.items[i]['serving_size_g']);
    console.log('the total fat in grams is:',obj.items[i]['fat_total_g']);
   // console.log(typeof(obj.items[i]['fat_total_g']));
   // console.log('the total fat in grams is:',obj.items[i]['fat_total_g'] + 5);
    totalFat = totalFat + obj.items[i]['fat_total_g'];
   // console.log('total fat for the meal is :',totalFat);
    console.log('the total saturated fat in grams is:',obj.items[i]['fat_saturated_g']);
    totalSaturatedFat  = totalSaturatedFat  + obj.items[i]['fat_saturated_g']
    console.log('the total grams of protein is:',obj.items[i]['protein_g']);
    totalProtein = totalProtein  + obj.items[i]['protein_g'];
    console.log('the total grams of sodium is:',obj.items[i]['sodium_mg']);
    totalSodium = totalSodium  + obj.items[i]['sodium_mg'];
    console.log('the total grams of potassium is:',obj.items[i]['potassium_mg']);
    totalPotassium = totalPotassium  + obj.items[i]['potassium_mg'];
    console.log('the total grams of cholesterol is:',obj.items[i]['cholesterol_mg']);
    totalCholesterol = totalCholesterol  + obj.items[i]['cholesterol_mg'];
    console.log('the total grams of carbohydrate is:',obj.items[i]['carbohydrates_total_g']);
    totalCarbohydrates = totalCarbohydrates  + obj.items[i]['carbohydrates_total_g'];
    console.log('the total grams of fiber is:',obj.items[i]['fiber_g']);
    totalFiber = totalFiber  + obj.items[i]['fiber_g'];
    console.log('the total grams of sugar is:',obj.items[i]['sugar_g']);
    totalSugar = totalSugar  + obj.items[i]['sugar_g'];
    console.log('\n');
}

console.log('total grams of fat for the meal is :',totalFat);
console.log('total grams of saturated fat for the meal is :',totalFat);
console.log('total grams of protein the meal is :',totalProtein);
console.log('total milligrams sodium the meal is :',totalSodium);
console.log('total milligrams of potassium the meal is :',totalPotassium);
console.log('total milligrams of cholesterol the meal is :',totalCholesterol);
console.log('total grams of carbohydrates the meal is :',totalCarbohydrates);
console.log('total grams of fiber the meal is :',totalFiber);
console.log('total grams of sugar the meal is :',totalSugar);

})
.catch(error => {
  console.error(error);
});

Result:

[ 'items' ]
{
  name: 'onion',
  calories: 152,
  serving_size_g: 340.19399999999996,
  fat_total_g: 0.6,
  fat_saturated_g: 0.1,
  protein_g: 4.7,
  sodium_mg: 10,
  potassium_mg: 119,
  cholesterol_mg: 0,
  carbohydrates_total_g: 34.3,
  fiber_g: 4.8,
  sugar_g: 16
}
onion
340.19399999999996
0.6
0.1
4.7
10
119
0
34.3
4.8
16
2
item number: 0
the name is: onion
the serving size in gram is 340.19399999999996
the total fat in grams is: 0.6
the total saturated fat in grams is: 0.1
the total grams of protein is: 4.7
the total grams of sodium is: 10
the total grams of potassium is: 119
the total grams of cholesterol is: 0
the total grams of carbohydrate is: 34.3
the total grams of fiber is: 4.8
the total grams of sugar is: 16

item number: 1
the name is: tomato
the serving size in gram is 100
the total fat in grams is: 0.2
the total saturated fat in grams is: 0
the total grams of protein is: 0.9
the total grams of sodium is: 4
the total grams of potassium is: 23
the total grams of cholesterol is: 0
the total grams of carbohydrate is: 3.9
the total grams of fiber is: 1.2
the total grams of sugar is: 2.6

total grams of fat for the meal is : 0.8
total grams of saturated fat for the meal is : 0.8
total grams of protein the meal is : 5.6000000000000005
total milligrams sodium the meal is : 14
total milligrams of potassium the meal is : 142
total milligrams of cholesterol the meal is : 0
total grams of carbohydrates the meal is : 38.199999999999996
total grams of fiber the meal is : 6
total grams of sugar the meal is : 18.6

[bshambaugh]

Code:

const axios = require('axios');

const apiKey = 'RN2x+V3YhTirpJM0ExxClQ==e1GElmIAUMseOMO5';
const query = '12oz onion and a tomato';

axios.get('https://api.calorieninjas.com/v1/nutrition?query='+query, {
  headers: {
    'X-API-Key': apiKey
  }
})
.then(response => {
 const obj = response.data; 
console.log(Object.keys(obj));
console.log(obj.items[0]);
console.log(obj.items[0]['name']);
console.log(obj.items[0]['serving_size_g']);
console.log(obj.items[0]['fat_total_g']);
console.log(obj.items[0]['fat_saturated_g']);
console.log(obj.items[0]['protein_g']);
console.log(obj.items[0]['sodium_mg']);
console.log(obj.items[0]['potassium_mg']);
console.log(obj.items[0]['cholesterol_mg']);
console.log(obj.items[0]['carbohydrates_total_g']);
console.log(obj.items[0]['fiber_g']);
console.log(obj.items[0]['sugar_g']);
console.log(obj.items.length);
let totalCalories = 0.0, totalFat = 0.0, totalSaturatedFat = 0.0, totalProtein = 0.0, totalSodium = 0.0, totalPotassium = 0.0, totalCholesterol = 0.0, totalCarbohydrates = 0.0, totalFiber = 0.0, totalSugar = 0.0;
//let totalFat, totalSaturatedFat, totalProtein, totalSodium, totalPotassium, totalCholesterol, totalCarbohydrates, totalFiber, totalSugar = 0.0;
for (let i = 0; i < obj.items.length; i++) {
    console.log('item number:',i);
    console.log('the name is:',obj.items[i]['name']);
    console.log('the serving size in gram is',obj.items[i]['serving_size_g']);
    console.log('the calories for the item is',obj.items[i]['calories']);
    totalCalories = totalCalories + obj.items[i]['calories'];
    console.log('the total fat in grams is:',obj.items[i]['fat_total_g']);
   // console.log(typeof(obj.items[i]['fat_total_g']));
   // console.log('the total fat in grams is:',obj.items[i]['fat_total_g'] + 5);
    totalFat = totalFat + obj.items[i]['fat_total_g'];
   // console.log('total fat for the meal is :',totalFat);
    console.log('the total saturated fat in grams is:',obj.items[i]['fat_saturated_g']);
    totalSaturatedFat  = totalSaturatedFat  + obj.items[i]['fat_saturated_g']
    console.log('the total grams of protein is:',obj.items[i]['protein_g']);
    totalProtein = totalProtein  + obj.items[i]['protein_g'];
    console.log('the total grams of sodium is:',obj.items[i]['sodium_mg']);
    totalSodium = totalSodium  + obj.items[i]['sodium_mg'];
    console.log('the total grams of potassium is:',obj.items[i]['potassium_mg']);
    totalPotassium = totalPotassium  + obj.items[i]['potassium_mg'];
    console.log('the total grams of cholesterol is:',obj.items[i]['cholesterol_mg']);
    totalCholesterol = totalCholesterol  + obj.items[i]['cholesterol_mg'];
    console.log('the total grams of carbohydrate is:',obj.items[i]['carbohydrates_total_g']);
    totalCarbohydrates = totalCarbohydrates  + obj.items[i]['carbohydrates_total_g'];
    console.log('the total grams of fiber is:',obj.items[i]['fiber_g']);
    totalFiber = totalFiber  + obj.items[i]['fiber_g'];
    console.log('the total grams of sugar is:',obj.items[i]['sugar_g']);
    totalSugar = totalSugar  + obj.items[i]['sugar_g'];
    console.log('\n');
}

console.log('total grams of fat for the meal is :',totalFat);
console.log('total calories for the meal is :',totalCalories);
console.log('total grams of saturated fat for the meal is :',totalFat);
console.log('total grams of protein the meal is :',totalProtein);
console.log('total milligrams sodium the meal is :',totalSodium);
console.log('total milligrams of potassium the meal is :',totalPotassium);
console.log('total milligrams of cholesterol the meal is :',totalCholesterol);
console.log('total grams of carbohydrates the meal is :',totalCarbohydrates);
console.log('total grams of fiber the meal is :',totalFiber);
console.log('total grams of sugar the meal is :',totalSugar);

})
.catch(error => {
  console.error(error);
});

Result:

[ 'items' ]
{
  name: 'onion',
  calories: 152,
  serving_size_g: 340.19399999999996,
  fat_total_g: 0.6,
  fat_saturated_g: 0.1,
  protein_g: 4.7,
  sodium_mg: 10,
  potassium_mg: 119,
  cholesterol_mg: 0,
  carbohydrates_total_g: 34.3,
  fiber_g: 4.8,
  sugar_g: 16
}
onion
340.19399999999996
0.6
0.1
4.7
10
119
0
34.3
4.8
16
2
item number: 0
the name is: onion
the serving size in gram is 340.19399999999996
the calories for the item is 152
the total fat in grams is: 0.6
the total saturated fat in grams is: 0.1
the total grams of protein is: 4.7
the total grams of sodium is: 10
the total grams of potassium is: 119
the total grams of cholesterol is: 0
the total grams of carbohydrate is: 34.3
the total grams of fiber is: 4.8
the total grams of sugar is: 16

item number: 1
the name is: tomato
the serving size in gram is 100
the calories for the item is 18.2
the total fat in grams is: 0.2
the total saturated fat in grams is: 0
the total grams of protein is: 0.9
the total grams of sodium is: 4
the total grams of potassium is: 23
the total grams of cholesterol is: 0
the total grams of carbohydrate is: 3.9
the total grams of fiber is: 1.2
the total grams of sugar is: 2.6

total grams of fat for the meal is : 0.8
total calories for the meal is : 170.2
total grams of saturated fat for the meal is : 0.8
total grams of protein the meal is : 5.6000000000000005
total milligrams sodium the meal is : 14
total milligrams of potassium the meal is : 142
total milligrams of cholesterol the meal is : 0
total grams of carbohydrates the meal is : 38.199999999999996
total grams of fiber the meal is : 6
total grams of sugar the meal is : 18.6

[bshambaugh]

code:

const axios = require('axios');

const apiKey = 'RN2x+V3YhTirpJM0ExxClQ==e1GElmIAUMseOMO5';
const query = '12oz onion and a tomato';

axios.get('https://api.calorieninjas.com/v1/nutrition?query='+query, {
  headers: {
    'X-API-Key': apiKey
  }
})
.then(response => {
 const obj = response.data; 
 let totalCalories = 0.0, totalFat = 0.0, totalSaturatedFat = 0.0, totalProtein = 0.0, totalSodium = 0.0, totalPotassium = 0.0, totalCholesterol = 0.0, totalCarbohydrates = 0.0, totalFiber = 0.0, totalSugar = 0.0;

  for (let i = 0; i < obj.items.length; i++) {
    totalCalories = totalCalories + obj.items[i]['calories'];
    totalFat = totalFat + obj.items[i]['fat_total_g'];
    totalSaturatedFat  = totalSaturatedFat  + obj.items[i]['fat_saturated_g']
    totalProtein = totalProtein  + obj.items[i]['protein_g'];
    totalSodium = totalSodium  + obj.items[i]['sodium_mg'];
    totalPotassium = totalPotassium  + obj.items[i]['potassium_mg'];
    totalCholesterol = totalCholesterol  + obj.items[i]['cholesterol_mg'];
    totalCarbohydrates = totalCarbohydrates  + obj.items[i]['carbohydrates_total_g'];
    totalFiber = totalFiber  + obj.items[i]['fiber_g'];
    totalSugar = totalSugar  + obj.items[i]['sugar_g'];
}

console.log('total grams of fat for the meal is :',totalFat);
console.log('total calories for the meal is :',totalCalories);
console.log('total grams of saturated fat for the meal is :',totalFat);
console.log('total grams of protein the meal is :',totalProtein);
console.log('total milligrams sodium the meal is :',totalSodium);
console.log('total milligrams of potassium the meal is :',totalPotassium);
console.log('total milligrams of cholesterol the meal is :',totalCholesterol);
console.log('total grams of carbohydrates the meal is :',totalCarbohydrates);
console.log('total grams of fiber the meal is :',totalFiber);
console.log('total grams of sugar the meal is :',totalSugar);

})
.catch(error => {
  console.error(error);
});

Output

total grams of fat for the meal is : 0.8
total calories for the meal is : 170.2
total grams of saturated fat for the meal is : 0.8
total grams of protein the meal is : 5.6000000000000005
total milligrams sodium the meal is : 14
total milligrams of potassium the meal is : 142
total milligrams of cholesterol the meal is : 0
total grams of carbohydrates the meal is : 38.199999999999996
total grams of fiber the meal is : 6
total grams of sugar the meal is : 18.6

[bshambaugh]

array push with react:

https://www.dhiwise.com/post/building-dynamic-lists-how-to-use-react-usestate-array-push