json on SwiftUI with Xcode 11.3

0
votes

I'm new to Swift need help I am supposed to output data with json in the app. if the date = date then it should be output in the same date.

import SwiftUI

struct ContentView: View {

var salatTimes: [SalatTime] = []
//timer
static let taskDateFormat: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateStyle = .medium
  //formatter.timeStyle = .medium
    return formatter

}()

var dueDate = Date()
//datum vergleich
@State private var salatT = taskDateFormat

//ende Timer
var body: some View {

    NavigationView {

    VStack {

        Text("Datum: \(dueDate, formatter: Self.taskDateFormat)")

        List(salatTimes) { item in
                Image(item.imageName)
                    .colorInvert()
                Text(item.nameSalat)
                    Spacer()
                Text(item.timeSalat)
                .padding()
        }.padding()
    }

    }.navigationViewStyle(StackNavigationViewStyle())

}

}

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView(salatTimes: SalatApp) } }

/**********/

struct SalatTime: Identifiable, Decodable {
var id = UUID()
var nameSalat: String
var timeSalat: String

var imageName: String { return nameSalat }

}

/************/ json data

{
"times": [
    {
        "date": "2020-01-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },      
    {
        "date": "2020-02-02",
        "fajr": "4:59 AM",
        "sunrise": "6:17 AM",
        "dhuhr": "11:47 AM",
        "asr": "2:56 PM",
        "maghrib": "5:18 PM",
        "isha": "6:48 PM"
    },  
    {
        "date": "2020-03-02",
        "fajr": "4:41 AM",
        "sunrise": "5:57 AM",
        "dhuhr": "11:46 AM",
        "asr": "3:07 PM",
        "maghrib": "5:36 PM",
        "isha": "7:06 PM"
    },  
    {
        "date": "2020-04-02",
        "fajr": "4:08 AM",
        "sunrise": "5:25 AM",
        "dhuhr": "11:38 AM",
        "asr": "3:07 PM",
        "maghrib": "5:51 PM",
        "isha": "7:21 PM"
    },
    {
        "date": "2020-05-02",
        "fajr": "3:36 AM",
        "sunrise": "4:58 AM",
        "dhuhr": "11:31 AM",
        "asr": "3:00 PM",
        "maghrib": "6:05 PM",
        "isha": "7:35 PM"
    },
    {
        "date": "2020-06-02",
        "fajr": "3:15 AM",
        "sunrise": "4:43 AM",
        "dhuhr": "11:32 AM",
        "asr": "2:56 PM",
        "maghrib": "6:20 PM",
        "isha": "7:50 PM"
    },
    {
        "date": "2020-07-02",
        "fajr": "3:18 AM",
        "sunrise": "4:47 AM",
        "dhuhr": "11:38 AM",
        "asr": "3:01 PM",
        "maghrib": "6:28 PM",
        "isha": "7:58 PM"
    },
    {
        "date": "2020-08-02",
        "fajr": "3:37 AM",
        "sunrise": "5:01 AM",
        "dhuhr": "11:40 AM",
        "asr": "3:07 PM",
        "maghrib": "6:19 PM",
        "isha": "7:49 PM"
    },
    {
        "date": "2020-09-02",
        "fajr": "3:56 AM",
        "sunrise": "5:15 AM",
        "dhuhr": "11:34 AM",
        "asr": "3:03 PM",
        "maghrib": "5:53 PM",
        "isha": "7:23 PM"
    },
    {
        "date": "2020-10-02",
        "fajr": "4:10 AM",
        "sunrise": "5:26 AM",
        "dhuhr": "11:23 AM",
        "asr": "2:47 PM",
        "maghrib": "5:20 PM",
        "isha": "6:50 PM"
    },
    {
        "date": "2020-11-02",
        "fajr": "4:24 AM",
        "sunrise": "5:42 AM",
        "dhuhr": "11:17 AM",
        "asr": "2:29 PM",
        "maghrib": "4:53 PM",
        "isha": "6:23 PM"
    },
    {
        "date": "2020-12-02",
        "fajr": "4:42 AM",
        "sunrise": "6:03 AM",
        "dhuhr": "11:23 AM",
        "asr": "2:23 PM",
        "maghrib": "4:43 PM",
        "isha": "6:13 PM"
    },
    {
        "date": "2020-13-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },
    {
        "date": "2020-14-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },
    {
        "date": "2020-15-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },
    {
        "date": "2020-16-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },
    {
        "date": "2020-17-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },
    {
        "date": "2020-18-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },
    {
        "date": "2020-19-02",
        "fajr": "4:58 AM",
        "sunrise": "6:19 AM",
        "dhuhr": "11:37 AM",
        "asr": "2:35 PM",
        "maghrib": "4:55 PM",
        "isha": "6:25 PM"
    },
]

}

please help

thank you

2
swiftui

2 Answers

0
votes

You are starting this the wrong way round.

You are trying to go directly to display, when your real problem is to parse the text in your JSON document and interpret it correctly as dates.

First thing you do is to create a model object that represents one of the array elements in your JSON data, importantly in the way that is most suitable for your application. Not in the way it is found in the JSON document. Then you write code that initialises the model object with one array element of the JSON data.

Once that is working, and thoroughly tested, then you can start with your UI. The date conversion functions should be part of your model object.

For extra points, ask yourself if your code will work in summer in Murmansk. Murmansk is a bit north of the arctic circle. Which means sunset can be at 0:05am for example.

0
votes

hello people i found the following solution with the help of some friends. I post my code here and hope that I can help someone with this solution. first part:

extension Formatter {
static let month: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateFormat = "MM"
    return formatter
}()
static let day: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateFormat = "dd"
    return formatter
}()

static let amPM: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateFormat = "a"
    return formatter
}()
}

extension Date {
    var month: String  { return Formatter.month.string(from: self) }
    var day:  String      { return Formatter.day.string(from: self) }
    var amPM: String         { return Formatter.amPM.string(from: self) }
}

second part:

import SwiftUI

struct ContentView: View {
    let prayTimes = Bundle.main.decode("time.json") 

var body: some View {

    GeometryReader { geometry in
               ZStack {
                   Image("background")
                       .resizable()
                       .aspectRatio(geometry.size, contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)

                ZStack{

                    timeView(self.prayTimes).padding()


                }
            }
        }
    }

}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}



struct ourView: View {
    var item: PrayTime

  var body: some View {
    VStack{


HStack{
    Text("Fajr").font(.body)
    Spacer()
    Text("\(item.fajr)")
    Image(systemName: "speaker").padding()
    }.padding()

HStack{
    Text("Sunrise").font(.body)
    Spacer()
    Text(item.sunrise)
    Image(systemName: "circle").padding()
    }.padding()

HStack{
    Text("Dhuhr").font(.body)
    Spacer()
    Text(item.dhuhr)
    Image(systemName: "speaker").padding()
    }.padding()

HStack{
    Text("Asr").font(.body)
    Spacer()
    Text(item.asr)
    Image(systemName: "speaker").padding()
    }.padding()

HStack{
    Text("Maghrib").font(.body)
    Spacer()
    Text(item.maghrib)
    Image(systemName: "speaker").padding()
    }.padding()

    HStack{
        Text("Isha").font(.body)
        Spacer()
        Text(item.isha)
        Image(systemName: "speaker").padding()
        }.padding()

}.foregroundColor(Color.white).background(Rectangle().opacity(0.5))


}
}

struct Countries: Decodable {
      let name: String
      let capital: String

  }


func timeView(_ items: [PrayTime]) -> AnyView {
 let date = Date()
    let day = date.day + "-" + date.month

for item in items{
    if (item.id == day) {
        return(AnyView(ourView(item: item)))
    }
}
return AnyView(Text("Nothing Found. Please update to resolve."))
}