Реагировать на собственное изображение json
Я хочу распечатать изображения 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;
});
И я хочу получить изображение, когда condition = "2".
Как я могу их получить? И как их распечатать?
Обязательно ли использовать base64? Если да, подскажите, как им пользоваться? Я видел объяснение, но не могу его понять.
И вот так я импортировал файл JSON (правильно его использовал):
var JsonData = require('./JsonData.json');
да. Но неважно, один это код или отдельный код.
Кстати, image хранятся локально? Похоже, они будут считываться из бандла.
да. Я хранил изображения локально.
Ответы 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"
},
]
}
let mainObject = JSON.parse (JSON.stringify (data)) <---- Эта ошибка возникла, когда я вставляю JsonData в (data). (undefined не является объектом (оценка 'condition.includes'). И эта ошибка возникла, когда я вставляю JsonData.appitizer в (данные). (undefined не является объектом (undefined не является функцией (рядом с '... array.map ... ')). Как решить?
Я анализирую ваши данные, которые вы поставили под сомнение.
Вы можете разобрать в нем свою строку.
Спасибо за ваш комментарий. Но я не могу этого понять. Какую строку вы имеете в виду?
Я говорю о JaonData.json
пусть mainObject = JSON.parse (JSON.stringify (JsonData.json)). <--- Верно? Это тоже привело к ошибке .. (Ошибка синтаксического анализа JSON: неожиданный идентификатор "undefined").
Здесь вам нужно проанализировать свои данные. Положите свою логику на это
@ello Я обновил свой ответ с помощью файла json. Пожалуйста, взгляните на это.
Спасибо за ваш добрый комментарий. <Text> {finalObject [1] .name} </Text> работает хорошо. Но я хочу отображать изображение на экране. <Image style = {{something}} source = {????} /> Я не знаю, что добавить в источник. Или мне нужно поступить иначе?
Вы можете использовать <Image style = {{width: 50, height: 50}} source = {{uri: {finalObject [1] .name}}} />
source = {{uri: {finalObject [1] .name}}} <--- Произошла ошибка (SyntaxError: / Users / ~~: Неожиданный токен, ожидается, (~: ~). И source = {{uri : finalObject [1] .name}} <--- Ошибки не было, но изображение не отображалось. finalObject [1] .image тоже.
Тогда у вас другая проблема. Я думаю, что вопрос, который вы задаете, довольно хорошо выдерживает мой ответ.
Я решил это. "image": require ("./ appetizer / soup.png") <--- так в data.js! Большое спасибо за все ваши комментарии !!
Вы можете использовать Объект # значения для получения массивов, соответствующих appetizer и main, а затем Массив # плоский для извлечения вложенных объектов в преобразованный массив. Затем используйте Array#filter (который вы уже используете), чтобы отфильтровать только необходимые объекты на основе вашего состояния, а затем Массив # карта, чтобы получить значения 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.info(filteredValues);Результатом приведенного выше кода будет массив объектов, имеющих следующую структуру
[{
"name": SOME_NAME,
"image": SOME_PATH
},
{
"name": SOME_NAME,
"image": SOME_PATH
},
...
]
Вы можете использовать приведенный выше массив, чтобы получить свой путь к image и соответствующим образом отобразить его.
Думаю, вам не стоит беспокоиться о base64, поскольку изображения хранятся локально, и path будет достаточно для отображения изображения.
Надеюсь, это поможет !!!
Примечание: Вы можете избежать части Array#flat, поскольку вы уже делаете это вручную [...JsonData["apptizer"], ...JsonData["main"]], но flat будет удобен в случае, если в jsonData есть больше ключей, которые необходимо учитывать.
Вы хотите и
image, иname?