json on SwiftUI with Xcode 11.3 - swiftui

Question

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

Answer 1

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.

Answer 2

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."))
}