Convertion obj json react native

Question

i have one json:

fakeApi.js:

{
  "offSet": [
    {
      "code": "AB",
      "price": "1032"
    }
    {
      "code": "CD",
      "price": "1054"
    }
    {
      "code": "EF",
      "price": "2042"
    }
  ]
}

I want to convert the "code" to text, example:

AB has to display Alfa Bravo CD has to display Charlie Delta EF has to display Eco Foxtrot

App.js

import React from { useState } from 'react';
import { View, Text } from 'react-native';
import fakeApi from './fakeApi.js';

function App() {
  const sus = fakeApi.offSet;

  const getConvert = () => {
    const fake = sus.map(place => place.code);

    switch(fake) {
      case "AB":
        return <Text>Alfa Bravo</Text>
      case "CD":
        return <Text>Charlie Delta</Text>
      case "EF":
        return <Text>Eco Foxtrot</Text>
      default:
        return <Text>error</Text>
    }    
  }

  return (
    <View>
      {sus.map(place => (
        <View>
          <Text>{place.CODECONVERTIDO}</Text>
          <Text>{place.price}</Text>
        </View>
      ))}
    </View>
  )
}

export default App;

The convertion is correct? Where am i missing?

thanks!!

Answer 1

Your map function returns an array, which must be iterated through using a loop.

You cannot run switch on an array to create an iterator.

Use your map callback to manipulate the code to text, and return both elements of the array. Something like....

    const convertedCode = sus.map(place => {
      let placeConversion = null;
      switch(place.code) {
           ...
           placeConversion = ...
      }
      return { price: place.price, converted: placeConverted }
    });

Answer 2

this your error you match array with string in switch case

const fake = sus.map(place => place.code); this is return array

case "AB": but here you macth array with string

so your switch shoud be

const getConvert = (code) => {
    switch(code) {
      case "AB":
        return <Text>Alfa Bravo</Text>
      case "CD":
        return <Text>Charlie Delta</Text>
      case "EF":
        return <Text>Eco Foxtrot</Text>
      default:
        return <Text>error</Text>
    }    
  }

and use it in your render function like this

   {sus.map(
     place => (
       <View>
          <Text>{getConvert(place.code)}</Text>
          <Text>{place.price}</Text>
        </View>
      )
    )
  }