Using JSON returned via PHP in Javascript

Question

So I'm doing a project for college involving an API for information about food, it returns the food brand, id, energy and fat etc.. via JSON, it also returns lots of other information that I don't want via JSON so I'm wondering how I can be selective with what I return and then use.

I'm connecting to the API using PHP and this is the code I'm using.

<?php
//$ingr = "ingr=" . $_GET['foodName'];
$ingr = "ingr=Bread";

//echo getFoodFromAPI($ingr);
getFoodFromAPI($ingr);

//return $decodedData;
function getFoodFromAPI($ingr){
    /*$queryParams = array(
        'Food' => $JsonFood
    );*/
    //echo $JsonFood;
    $api = "https://api.edamam.com/api/food-database/parser?";
    $apiId = "&app_id=ABC";
    $apiKey = "&app_key=ABC";
    $url = $api . $ingr . $apiId . $apiKey; //+ $search

    $JsonContents = file_get_contents($url);
    $Json = json_decode($JsonContents);

    //echo $JsonBrand."Hello There Brand";

    for ($x = 1; $x <= 10; $x++) {
        $JsonBrand = $Json->hints[$x]->{'food'}->{'brand'} . "<br>"; //used to echo the values of the decoded data
        $JsonLabel = $Json->hints[$x]->{'food'}->{'label'} . "<br>"; //used to echo the values of the decoded data
        echo $JsonBrand;
        echo $JsonLabel;
    } 

    $JsonRec = json_encode($Json);



    //print_r($JsonRec->hints->food);

    return $JsonRec;

};

?>

So my question is this, is there a way to return only certain parts of the JSON decode? I don't need/want certain information (eg: Return only the brand & id of the food) and also is there a way I can use the returned data being either a PHP object OR array in javascript (i.e show it to a client on a webpage)

Please feel free to ask me to clarify anything I've failed to explain, like I said I'm a college student so I'm still learning and grasping the languages as I use them.

Also for reference here is the HTML & JavaScript I was working with and again I don't know if this is correct either because there is a mix between AJAX and JQuery.

function find_food(foodName) {
  var vars = "foodName" + foodName;
  var result = "";

  $.ajax({
    url: "sendFood.php",
    type: "GET",
    data: vars,
    async: false,
    success: function(data) {
      console.log(data + "Data Here !");
      result = data;
    }
  });
  return result;
  //console.log(result);
  //return result;
}

function searchFoodDic() {
  var food = document.getElementById("foodName").value;
  console.log(food);
  //var htmlText = "";
  document.getElementById("searchedFood").innerHTML = "processing...";
  var foodSearched = find_food(food);
  console.log('>>>> searched food: ', foodSearched);
  //htmlText += '<p class="p-name"> Train Code: ' + foodSearched[1].brand + '</p>';
  //var filteredFood = getCommonFoods(foodSearched.food);
  //console.log('>>>> filtered food: ', filteredFood);
  htmlText = "Hello";

  for (i = 0; i < 5; i++) {
    //htmlText += '<p class="p-foodName"> Food Name: ' + data.hints[i].food.brand + '</p>';
    htmlText += '<p class="p-foodLabel1"> Food Label 1: ' + foodSearched.foodId + '</p>';
    htmlText += '<p class="p-foodLabel2"> Food Label 2: ' + foodSearched.label + '</p>';
    htmlText += '<br/>';
  }

  document.getElementById("searchedFood").innerHTML = htmlText;
}

<link rel="stylesheet" type="text/css" href="food.css">
<html>

<head>
  <ul>
    <li><a class="active" href="index.php">Home </a></li>
    <li><a href="admin.html">Administration</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


</head>
<title> Food Website </title>

<body>
  <script src="searchFood.js" type="text/javascript"></script>
  <div class="food-container">
    <input type="text" id="foodName" name="foodName" placeholder="Enter food eg: Apple, Bread">
    <input type="submit" onclick="searchFoodDic()">
    <div id="searchedFood">

    </div>
  </div>
</body>

</html>

Jaquarh · Accepted Answer

You can create a new array of the data you want to return to the JS. For example, inside your function you could change your code to look like this

$Json = json_decode($JsonContents);
$output = [];

for ($x = 1; $x <= 10; $x++) {
    $hint = [];
    $hint['brand'] = $Json->hints[$x]->{'food'}->{'brand'};
    $hint['label'] = $Json->hints[$x]->{'food'}->{'label'};
    $output[] = $hint;
}

return $output;

You can then return this data like so

echo json_encode(getFoodFromAPI($ingr));

Your JS would look like this:

foodSearched.forEach(function(hint) {
    console.log('Brand is ' + hint.brand + ' and label is ' + hint.label);
});

You are close to achieving your goal, you just need to return only the 'broken down' data of the API request to the JS HTTP request. At the moment, you are doing the correct PHP logic of breaking down only the data you want to return to the JS, but you are using $JsonRec = json_encode($Json); which is sending back all of the API request rather than your PHP logic.

Hope this helps.

Here is a working example for you to just test

# Eggs
$response = json_decode(file_get_contents('https://api.edamam.com/api/food-database/parser?ingr=egg&app_id=47971bbd&app_key=15ddd5fb6a552c59762e2dc7093d5f85'));

$output = [];

for ($x = 1; $x <= 10; $x++) {
    $hint = [];
    $hint['brand'] = $response->hints[$x]->{'food'}->{'brand'};
    $hint['label'] = $response->hints[$x]->{'food'}->{'label'};
    $output[] = $hint;
}

header('Content-Type: application/json');
var_dump(json_encode($response)); # Here is what your JS would see
die();

Using JSON returned via PHP in Javascript

Tags:

json

javascript

jquery

php

The Irish Ace Delaney

1 Answers

Jaquarh

Recent Activity

Donate For Us

Using JSON returned via PHP in Javascript

Tags:

json

javascript

jquery

php

The Irish Ace Delaney

1 Answers

Jaquarh

Related questions

Recent Activity

Donate For Us