My structure does not conform to protocol 'Decodable' / 'Encodable' if I use protocol type in my structure in swift

Question

Here I am trying to read data from json file, and casting it dynamically. But if I use prototype in struct it's showing me does not conform to protocol 'Decodable' / 'Encodable' error. Please let me know if I am missing something here.

struct ScreenData: Codable {
    var id: String
    var objectid : String
    var config : UIConfig
}

protocol UIConfig: class, Codable{
    var bgColor : String? { get set }
}

class LabelConfig : UIConfig {
    var bgColor: String?
    var label : String? = ""
}

class ButtonConfig : UIConfig {
    var bgColor: String?
    var btn_label : String = ""
    //var btn_text_color : UIColor = .black
}

Here I am reading data from json file and adding component in stack view depending on data

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
//        create stack view to add components
        let stackView = UIStackView()
        stackView.axis = NSLayoutConstraint.Axis.vertical
        stackView.distribution = .fill
        stackView.alignment = .fill
        stackView.spacing = 10
        stackView.backgroundColor = .gray
        
        var screenData = [ScreenData]()
//        read components from json
        screenData =  loadScreen()
        //print("viewDidLoad screenData : \(screenData)")
        for data in screenData {
            let subView = loadScreenView(data: data, objectId: data.objectid)
            //add components in stack view
            stackView.addArrangedSubview(subView)
        }
        
        self.view.addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 10).isActive = true
        stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 10).isActive = true
        
        stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        
        stackView.heightAnchor.constraint(equalToConstant: 200).isActive = true
    }
    
// function to laod data from json
    func loadScreen() -> [ScreenData] {
        var jsonData = [ScreenData]()
        if let fileLocation = Bundle.main.url(forResource: "screen_data", withExtension: "json"){
            do{
                let data = try Data(contentsOf: fileLocation)
                let jsonDecoder = JSONDecoder()
                let dataFromJson =  try jsonDecoder.decode([ScreenData].self, from: data)
                jsonData = dataFromJson
            }catch{
                print(error)
            }
        }
        //print("loadScreen screenData :: \(jsonData)")
        return jsonData
    }


Here I check the object type, and depending on that cast the config

    func loadScreenView(data : ScreenData,objectId : String) -> UIView {
        var view = UIView()
        if(objectId == "bd_label"){
            print("bd_label")
            let labelView = UILabel()
            //labelView.sizeToFit()
            let config = data.config as! LabelConfig
            labelView.text = config.label
            labelView.widthAnchor.constraint(equalToConstant: 300).isActive = true
            labelView.heightAnchor.constraint(equalToConstant: 35).isActive = true
            view = labelView
        }
        if(objectId.elementsEqual("bd_button")){
            print("bd_button")
            let buttonView = UIButton()
            let config = data.config as! ButtonConfig
            
            buttonView.setTitle(config.btn_label, for:.normal)
            buttonView.backgroundColor = .blue
            buttonView.widthAnchor.constraint(equalToConstant: 200).isActive = true
            buttonView.heightAnchor.constraint(equalToConstant: 35).isActive = true
            view = buttonView
        }
        if(objectId == "bd_input"){
            print("bd_input")
            let inputView = UITextView()
            let config = data.config as! InputConfig
            
            inputView.text = config.placeholder
            inputView.backgroundColor = .white
            inputView.widthAnchor.constraint(equalToConstant: 300).isActive = true
            inputView.heightAnchor.constraint(equalToConstant: 35).isActive = true
            view = inputView
        }
        
        return view
    }
    

}

Answer 1

JSONDecoder needs to know the concrete type of thing that you want to decode the JSON into. After all, everything must have a concrete type at runtime, that you can get with type(of:). You can't tell it to just "decode a protocol". The encoder is a bit different though - it doesn't actually need to know the concrete type, and there is a way to get around it.

It seems like the type of UIConfig depends on objectid, so we can check objectid and decide what type of UIConfig to decode:

enum CodingKeys: CodingKey {
    case id, objectid, config
}

init(from decoder: Decoder) throws {
    let container = try decoder.container(keyedBy: CodingKeys.self)
    id = try container.decode(String.self, forKey: .id)
    objectid = try container.decode(String.self, forKey: .objectid)
    if objectid == "bd_label" {
        config = try container.decode(LabelConfig.self, forKey: .config)
    } else if objectid == "bd_button" {
        config = try container.decode(ButtonConfig.self, forKey: .config)
    } 
    // other cases...
    else {
        throw DecodingError.dataCorruptedError(forKey: .config, in: container, debugDescription: "no suitable config type found for objectid \(objectid)!")
    } 
}

For the Encodable part, you can make a "type eraser"-like thingy:

struct AnyEncodable: Encodable {
    let encodeFunction: (Encoder) throws -> Void
    
    init(_ encodable: Encodable) {
        encodeFunction = encodable.encode(to:)
    }
    
    func encode(to encoder: Encoder) throws {
        try encodeFunction(encoder)
    }
}

and do:

func encode(to encoder: Encoder) throws {
    var container = encoder.container(keyedBy: CodingKeys.self)
    try container.encode(id, forKey: .id)
    try container.encode(objectid, forKey: .objectid)
    try container.encode(AnyEncodable(config), forKey: .config)
}

By using AnyEncodable, we are basically wrapping the protocol in a concrete type, but don't worry - this won't actually create an extra pair of curly brackets in the JSON.