使用JavaScript从JSON文件中分离多个数据

我试图使用以下代码显示从API获取的JSON文件中的值

const query = 'chicken';
const uri = 'https://trackapi.nutritionix.com/v2/search/instant?query=' + query;
let appid = new Headers();
appid.append('x-app-id', '19421259')
let appkey = new Headers();

appid.append('x-app-key', '54a4e6668518084478d9025d8a5e32a2')

let req = new Request(uri, {
  method: 'GET',
  headers: appid,
  appkey,
});

fetch(req)
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('BAD HTTP stuff');
    }
  })
  .then((jsonData) => {
    console.log(jsonData);
    var jsonString = JSON.stringify(jsonData);
    document.write(jsonString);

  })
  .catch((err) => {
    console.log('ERROR', err.message);
  });

它成功返回JSON并将其转换为字符串，但我不知道如何将它们分开，因为JSON包含多个数据（例如，搜索鸡肉会返回多个不同品牌和烹饪类型的鸡肉餐），如下所示：

{
  "common": [{
        "food_name": "chicken",
        "serving_unit": "oz",
        "tag_name": "chicken",
        "serving_qty": 3,
        "common_type": null,
        "tag_id": "9",
        "photo": {
          "thumb": "https://d2xdmhkmkbyw75.cloudfront.net/9_thumb.jpg"
        },
        "locale": "en_US"
      }, {
        "food_name": "chickensalad",
        "serving_unit": "cup",
        "tag_name": "chicken salad",
        "serving_qty": 0.5,
        "common_type": null,
        "tag_id": "1420",
        "photo": {
          "thumb": "https://d2xdmhkmkbyw75.cloudfront.net/1420_thumb.jpg"
        },
        "locale": "en_US"
      }, {
        "food_name": "chicken salad",
        "serving_unit": "cup",
        "tag_name": "chicken salad",
        "serving_qty": 0.5,
        "common_type": null,
        "tag_id": "1420",
        "photo": {
          "thumb": "https://d2xdmhkmkbyw75.cloudfront.net/1420_thumb.jpg"
        },
        "locale": "en_US"
      }, {
        "food_name": "chicken broth",
        "serving_unit": "cup",
        "tag_name": "broth chicken",
        "serving_qty": 1,
        "common_type": null,
        "tag_id": "3336",
        "photo": {
          "thumb": "https://d2xdmhkmkbyw75.cloudfront.net/3336_thumb.jpg"
        },
        "locale": "en_US"
      }, {
        "food_name": "whole chicken",
        "serving_unit": "chicken",
        "tag_name": "whole chicken",
        "serving_qty": 1,
        "common_type": null,
        "tag_id": "4025",
        "photo": {
          "thumb": "https://d2xdmhkmkbyw75.cloudfront.net/4025_thumb.jpg"
        },
        "locale": "en_US"
      }

---

我应该如何实现它，以便能够分别显示每种食物及其各自的变量？

如果我理解正确，您将尝试过滤作为JSON对象获取的数据，以便它只包括“食物名称”和“标签名称”属性中保存的食物

在这种情况下，您可以编写一个简单的函数来进行过滤，如下所示：

const getFilteredFoodsArray = food => {
  food = food.toLowerCase();
  return common.filter(
    data =>
      data.food_name.toLowerCase().includes(food) ||
      data.tag_name.toLowerCase().includes(food)
  );
};

然后，如果您这样运行它：

console.log(getFilteredFoodsArray("chicken"))

你的结果是：

[ 
  { food_name: 'chicken',
    serving_unit: 'oz',
    tag_name: 'chicken',
    serving_qty: 3,
    common_type: null,
    tag_id: '9',
    photo:
     { thumb: 'https://d2xdmhkmkbyw75.cloudfront.net/9_thumb.jpg' },
    locale: 'en_US' },
  { food_name: 'chickensalad',
    serving_unit: 'cup',
    tag_name: 'chicken salad',
    serving_qty: 0.5,
    common_type: null,
    tag_id: '1420',
    photo:
     { thumb: 'https://d2xdmhkmkbyw75.cloudfront.net/1420_thumb.jpg' },
    locale: 'en_US' },
  { food_name: 'chicken salad',
    serving_unit: 'cup',
    tag_name: 'chicken salad',
    serving_qty: 0.5,
    common_type: null,
    tag_id: '1420',
    photo:
     { thumb: 'https://d2xdmhkmkbyw75.cloudfront.net/1420_thumb.jpg' },
    locale: 'en_US' },
  { food_name: 'chicken broth',
    serving_unit: 'cup',
    tag_name: 'broth chicken',
    serving_qty: 1,
    common_type: null,
    tag_id: '3336',
    photo:
     { thumb: 'https://d2xdmhkmkbyw75.cloudfront.net/3336_thumb.jpg' },
    locale: 'en_US' },
  { food_name: 'whole chicken',
    serving_unit: 'chicken',
    tag_name: 'whole chicken',
    serving_qty: 1,
    common_type: null,
    tag_id: '4025',
    photo:
     { thumb: 'https://d2xdmhkmkbyw75.cloudfront.net/4025_thumb.jpg' },
    locale: 'en_US' } 
]

---

现在还不清楚你希望结果是什么样子。你能举一个例子，说明鸡肉项目经过转换后应该是什么样的吗？很抱歉，但我想要的是以列表形式显示鸡肉项目，显示其详细信息，因为这将在搜索功能中实现，用户将搜索特定食物，并显示与其相关的所有食物搜索我不确定我在这里不了解的内容-此数据看起来可以通过迭代

common

来显示。很抱歉，我可能没有正确解释，但我想做的是从结果中获取每个数据（例如，仅获取此>{食物名称：'chicken'，上菜单位：'oz'，标签名称：'chicken'，上菜数量：3，常见类型：null，标签id:'9'，照片：{拇指：'}，区域设置：'en_US'}，这样我就可以单独显示它们了。我是一个使用json的初学者，所以这可能是一个非常基本的东西，我无法理解