CODEWITHSUNDEEP
jsonimagereact-native
ello
ello

Reputation: 25

react native json image

I want to print out JSON images as a variable.

This is my local JSON file (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"     
    },
   …
  ]
}

I filtered the name when condition="2". (salad,soup,fish)

This is the code for filtering name:

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

AND I want to get the image when condition="2".

How can I get them? And How can I print out them?

Do I have to use base64? If so, Can you tell me how to use it? I saw the explanation, but I can't understand it.

And I imported JSON file this way (I've been correctly using it):

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

Upvotes: 1

Views: 960

Answers (2)

Prasun
Prasun

Reputation: 5023

You can use Object#values to get the arrays corresponding to appetizer and main and then Array#flat to extract the nested objects into a transformed array. Then use the Array#filter (which you are already using) to filter out only the required objects based on your condition and then Array#map to get the name and image values out of every filtered object into an array of objects.

Please consider following snippts

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);

The output of the above code will be an array of objects having the following structure

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

You can use the above array to retrieve your image path and display it accordingly.

I think you shouldn't be worried about base64 as images are stored locally and path will be sufficient to display the image.

Hope this will help!!!

Side Note: You can avoid the Array#flat part as you are already doing it manually [...JsonData["apptizer"], ...JsonData["main"]] but flat will be handy in case there are more keys in jsonData that need to be considered.

Upvotes: 1

Nirmalsinh Rathod
Nirmalsinh Rathod

Reputation: 5186

You can use below code:

    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))

You can import data in top of screen:

import { data } from './data';

You can add below text in 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"
        },
    ]
}

Upvotes: 1

Related Questions