Question

我想将JSON图片作为变量打印出来。

这是我的本地JSON文件（JsonData.json）：

  {
  "appetizer": [
    {
      "num": "appetizer1",
      "name": "salad",
      "condition": [ "1", "2" ],
      "image": "./appetizer/salad.png"
    },
    {
      "num": "appetizer2",
      "name": "soup",
      "condition": [ "2", "3" ],
      "image": "./appetizer/soup.png"
    },
    …
   ],

  "main": [
    {
      "num": "main1",
      "name": "beef",
      "condition": [ "1" ],
      "image": "./main/beef.png"   
    },
    {
      "num": "main2",
      "name":  "fish",
      "condition": [ "2", "3" ],
      "image": "./main/fish.png"     
    },
   …
  ]
}

当condition =“ 2”时，我过滤了名称。（沙拉，汤，鱼）

这是用于过滤名称的代码：

const newArray1 = [...JsonData["apptizer"], ...JsonData["main"]];
const JsonResult = newArray1.filter(item => {
  if(item.condition.indexOf("2") !== -1) return item.name;
});

并且我想在condition =“ 2”时获取图像。

我如何获得它们？我该如何打印出来？

我必须使用base64吗？如果是这样，您能告诉我如何使用吗？我看到了解释，但我听不懂。

然后我以这种方式导入JSON文件（我一直在正确使用它）：

var JsonData = require('./JsonData.json');

Answer 1

您可以使用以下代码：

    let mainObject = JSON.parse(JSON.stringify(data))
    let allKeys = Object.keys(mainObject)
    let finalObject = []
    allKeys.map((value, index) => {
        let array = mainObject[value]
        array.map((aryObject, aryIndex) => {
            let condition = aryObject['condition']
            if (condition.includes('2')) {
                finalObject.push(aryObject)
            }
        })
    })
    alert(JSON.stringify(finalObject))

您可以在屏幕顶部导入数据：

import { data } from './data';

您可以在 data.js 中添加以下文本：

export const data = {
    "appetizer": [
        {
            "num": "appetizer1",
            "name": "salad",
            "condition": ["1"],
            "image": "./appetizer/salad.png"
        },
        {
            "num": "appetizer2222",
            "name": "soup",
            "condition": ["2", "3"],
            "image": "./appetizer/soup.png"
        },
    ],
    "main": [
        {
            "num": "main1",
            "name": "beef",
            "condition": ["1"],
            "image": "./main/beef.png"
        },
        {
            "num": "main2",
            "name": "fish",
            "condition": ["21", "3"],
            "image": "./main/fish.png"
        },
    ]
}

Answer 2

您可以使用Object#values获取与appetizer和main对应的数组，然后使用Array#flat将嵌套对象提取到转换后的数组中。然后使用Array#filter（您已经在使用）根据您的条件仅过滤出所需的对象，然后使用Array#map从中获取name和image的值每个过滤的对象都变成对象数组。

请考虑以下摘录

const jsonData = {"appetizer":[{"num":"appetizer1","name":"salad","condition":["1","2"],"image":"./appetizer/salad.png"},{"num":"appetizer2","name":"soup","condition":["2","3"],"image":"./appetizer/soup.png"}],"main":[{"num":"main1","name":"beef","condition":["1"],"image":"./main/beef.png"},{"num":"main2","name":"fish","condition":["2","3"],"image":"./main/fish.png"}]};

const filteredValues = Object.values(jsonData)
  .flat()
  .filter(o => o.condition.includes('2'))
  .map(({name, image}) => ({ name, image }));

console.log(filteredValues);

以上代码的输出将是具有以下结构的对象数组

[{
  "name": SOME_NAME,
  "image": SOME_PATH
 },
 {
  "name": SOME_NAME,
  "image": SOME_PATH
 },
 ...
]

您可以使用上面的数组来检索您的image路径并相应地显示它。

我认为您不必担心base64，因为图像存储在本地，path足以显示图像。

希望这会有所帮助！

侧面说明：：您可以避免使用Array#flat部分，因为您已经手动进行[...JsonData["apptizer"], ...JsonData["main"]]，但是如果有更多按键，flat会很方便在jsonData中需要考虑。

反应本地JSON图像

2 个答案: