在Javascript中使用通过PHP返回的JSON

时间:2018-12-02 22:54:25

标签: javascript php jquery json

所以我正在为一个大学项目做一个涉及食物信息的API,它通过JSON返回食物品牌,id,能量和脂肪等。它还返回许多我不想要的其他信息通过JSON,所以我想知道如何选择返回的内容然后再使用。

我正在使用PHP连接到API,这是我正在使用的代码。

std::reverse(compressed.begin(), compressed.end());

?>

所以我的问题是,有没有办法只返回JSON解码的某些部分?我不需要/想要某些信息(例如:仅返回食品的品牌和ID),并且还有一种方法可以使用返回的数据作为javascript中的PHP对象或数组(即,将其显示给客户端)在网页上)

请随时问我澄清我未能解释的任何内容,就像我说我是一名大学生一样,所以我在学习和使用语言时仍在学习和掌握它们。

这里还供我参考的是我正在使用的HTML和JavaScript,我也不知道这是否正确,因为AJAX和JQuery之间存在混淆。

<?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;

};
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;
}

1 个答案:

答案 0 :(得分:2)

您可以创建要返回JS的数据的新数组。例如,在您的函数内部,您可以将代码更改为如下形式

$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;

然后您可以像这样返回此数据

echo json_encode(getFoodFromAPI($ingr));

您的JS看起来像这样:

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

您即将实现目标,您只需要将API请求的“细分”数据返回到JS HTTP请求即可。目前,您正在执行正确的PHP逻辑,仅分解要返回给JS的数据,但您使用的是$JsonRec = json_encode($Json);,它会发回API请求的全部而不是您的PHP逻辑。

希望这会有所帮助。

这是一个可供您测试的有效示例

# 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();