реагировать нативное изображение JSON

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"     
    },
   …
  ]
}  

Я отфильтровал имя, когда условие = "2».(салат, суп, рыба)

Это код фильтрации имени:

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

И я хочу получить изображение, когда условие = "2".

Как я могу получить их?И как их распечатать?

Нужно ли использовать base64?Если да, можете ли вы сказать мне, как его использовать?Я видел объяснение, но не могу его понять.

И я импортировал файл JSON таким образом (я правильно его использовал):

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

Answer 1

Вы можете использовать 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 будет достаточно для отображения изображения.

Надеюсьэто поможет !!!

Side Примечание: Вы можете избежать части Array#flat, поскольку вы уже делаете это вручную [...JsonData["apptizer"], ...JsonData["main"]], но flat будет удобно в случае, если естьбольше ключей в jsonData, которые необходимо учитывать.

Answer 2

Вы можете использовать следующий код:

    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"
        },
    ]
}