Использование JSON, возвращенного через PHP, в Javascript
Итак, я делаю проект для колледжа, включающий API для информации о еде, он возвращает бренд еды, идентификатор, энергию, жир и т. д. Через JSON, он также возвращает много другой информации, которая мне не нужна, через JSON, поэтому Мне интересно, как я могу быть избирательным в том, что я возвращаю, а затем использую.
Я подключаюсь к API с помощью PHP, и это код, который я использую.
<?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;
};
?>
Итак, мой вопрос: есть ли способ вернуть только определенные части декодированного JSON? Мне не нужна / не нужна определенная информация (например: возвращать только марку и идентификатор еды), а также есть способ использовать возвращенные данные, являющиеся либо объектом PHP, либо массивом в javascript (т.е. показать его клиенту на веб-странице)
Пожалуйста, не стесняйтесь попросить меня прояснить все, что я не смог объяснить, например, я сказал, что учусь в колледже, поэтому я все еще изучаю и понимаю языки, когда использую их.
Также для справки вот HTML и JavaScript, с которыми я работал, и снова я не знаю, правильно ли это, потому что существует смесь между AJAX и 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.info(data + "Data Here !");
result = data;
}
});
return result;
//console.info(result);
//return result;
}
function searchFoodDic() {
var food = document.getElementById("foodName").value;
console.info(food);
//var htmlText = "";
document.getElementById("searchedFood").innerHTML = "processing...";
var foodSearched = find_food(food);
console.info('>>>> searched food: ', foodSearched);
//htmlText += '<p class = "p-name"> Train Code: ' + foodSearched[1].brand + '</p>';
//var filteredFood = getCommonFoods(foodSearched.food);
//console.info('>>>> 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>Пожалуйста, задавайте вопросы однозначно и открывайте второй, чтобы задать второй вопрос ?
Хорошо, это хорошая информация, спасибо, Джон, знаете ли вы какие-либо руководства или что-нибудь, что я могу прочитать или посмотреть, которые показывают, как вы используете возвращенные данные JSON в JavaScript, потому что использование возвращенных данных так, как я хочу, - это проблема, я думаю Я сталкиваюсь.
Поскольку вы используете jQuery, я предлагаю прочитать их документацию.
@JonStirling Это неправда ... существуют потоковые парсеры JSON, созданные именно для этой цели! (Конечно, в данной конкретной ситуации он не нужен.)
@Brad А какая часть из них родная? Возможно, я ошибаюсь насчет необходимости дополнительной обработки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете создать новый массив данных, которые хотите вернуть в 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.info('Brand is ' + hint.brand + ' and label is ' + hint.label);
});
Вы близки к достижению своей цели, вам просто нужно вернуть только «разбитые» данные запроса API в HTTP-запрос JS. На данный момент вы выполняете правильную логику 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();
Вау, это было действительно полезно, спасибо Jaquarh, я получаю сообщение об ошибке в моем Javascript, в котором говорится, что foodSearched.forEach не является функцией. Следует ли мне использовать другую функцию в моем случае?
Console.log (foodSearched) и убедитесь, что это массив - я использовал jQuery, когда ответил на этот вопрос, поэтому вам, возможно, придется выполнить цикл вручную, используя foodSearched.length.
Итак, у меня работает функция forEach, но это похоже на то, что все данные с моего php хранятся в одном индексе, у меня PHP и JS увеличиваются правильно, исходя из того, что я вижу. Нужно ли мне увеличивать индекс foodSearched, поскольку теперь это массив? Я тоже не могу использовать. модификатор, как вы это делаете для цикла forEach.
var_dump () массив $ output в PHP и убедитесь, что он правильный, я не тестировал код - я просто поместил его туда, чтобы вы знали, что вы делаете не так. $ output должен быть многомерным массивом вида [['brand' => '...', 'label' => '...'], ['brand' => '...', 'label' => '...']] и т.д ...
Да, PHP кажется прекрасным и правильно структурированным, когда данные $ output передаются в JS, тогда он не сохраняет индексы и т.д., все данные помещаются в первый индекс массива foodSearched внутри моего JS, нужно ли мне это делать что-то в моем javascript для увеличения массива или что-то в этом роде?
Вы можете прокомментировать console.info (foodSearched); вывод для меня, чтобы я мог понять, что вы имеете в виду, используете ли вы заголовок («Content-Type application / json») и гарантируете, что вы только повторяете данные, ничего больше?
["Array↵ (↵ [brand] => Sogo Bakery, Inc.↵ [labe… Inc», «label»: «ХЛЕБ», «category»: «Упакованные продукты»})] Это то, что я вижу, но это сложно чтобы вставить сюда, вот и его изображение. Это то, что отображается на консоли i.imgur.com/2ro2xtL.png
Как вы выводите переменную $ output обратно в JS? Это должно быть просто echo $ output; похоже, вы это экспортируете
echo json_encode (getFoodFromAPI ($ ingr)); это эхо внизу моего php обратно к моему JS.
На самом деле я не знаю, почему у вас не работает, есть ли у вас заголовок (Content-Type: application / json); прежде чем использовать json_encode ()? Если да, то я понятия не имею, почему он так себя ведет, может быть, еще один вопрос по SO, чтобы мы могли увидеть код, который у вас есть, потому что мой работает, когда я пробую его на localhost
Не волнуйтесь, Jaquarh, ваша помощь была потрясающей, я сделаю еще один пост и посмотрю, что я могу с этим сделать, еще раз спасибо.
Итак, немного поработав с массивом в моем JavaScript, я получил ваше решение сверху, спасибо Jaquarh!
Не волнуйся, приятель, не стесняйтесь обновить мой ответ своим рабочим решением, чтобы помочь будущим зрителям :) плохо одобрять правки
Нет, вы не можете выборочно декодировать части строки JSON (в любом случае, не изначально, и если бы у вас была дополнительная обработка, чтобы вырезать то, что вам не нужно), поэтому просто игнорируйте то, что вам не нужно. . Я не совсем уверен, к чему идет вторая часть. Если у вас есть данные в PHP, вы, конечно, можете выводить эти данные на страницу в любом формате, который вы хотите, JSON является наиболее часто используемым, по моему опыту, при возврате данных в JavaScript.