Iterate over two arrays simultaneously in List - swiftui

Question

How can I iterate two array in a list:
struct ContentView: View {
let colors = ["red", "green", "blue"]
let names = ["John", "Apple", "Seed"]
var body: some View {
VStack {
List(colors, id: \.self) { color in
Text(color)
}
}
}
}
For example I need to have:
Text("\(color) - \(animal)")
My code would be like this (I know it's wrong but that's the idea):
List(colors, animals id: \.self) { color, animal in
Text("\(color) - \(animal)")
}

Answer 1

A bit simpler
var body: some View {
VStack {
List(Array(zip(colors, names)), id: \.self.0) { (color, name) in
Text("\(color) - \(name)")
}
}
}
Update: added variant for non-equal-size arrays
This one of course is a bit complicated, but might be helpful
var body: some View {
VStack {
ListOfPairs()
}
}
private func ListOfPairs() -> some View {
var iter = names.makeIterator()
let container = colors.reduce(into: Array<(String,String)>()) { (result, color) in
result.append((color, iter.next() ?? "None" )) // << placeholder for empty
}
return List(container, id: \.self.0) { (color, name) in
Text("\(color) - \(name)")
}
}

Answer 2

You could make those two arrays into an object for each item, as they are related to each other. This can be made like so:
struct Object: Identifiable {
let id: UUID = UUID()
let color: String
let name: String
}
let objects = [Object(color: "red", name: "John"),
Object(color: "green", name: "Apple"),
Object(color: "blue", name: "Seed")]
And used like so:
List(objects) { object in
Text("\(object.color) - \(object.name)")
}

Answer 3

I think this is all a bit cumbersome and creating types that don't need to be. For this reason SwiftUI has the ForEach Statement. The code can also look like this:
import SwiftUI
struct ContentView: View {
let colors = ["red", "blue", "black", "purple", "green"]
let names = ["Paul", "Chris", "Rob", "Terry", "Andy"]
var body: some View {
List {
ForEach(0 ..< colors.count) {
Text("Name \(self.names[$0]) has favorite color \(self.colors[$0]).")
}
.onDelete(perform: deleteRow)
}
}
}
The result then looks like this:
Of course, both arrays need to have the same number of elements.

Answer 4

Or, if you want to get two nice columns that you can manipulate the way you want it:
import SwiftUI
struct ContentView: View {
let colors = ["red", "blue", "black", "purple", "green"]
let names = ["Paul", "Chris", "Rob", "Terry", "Andy"]
var body: some View {
HStack {
List(names, id: \.self) { name in
Text(name)
}
.frame(width: 130)
List(colors, id: \.self) { color in
Text(color)
}
.frame(width: 160)
}
}
}
And then you get the result like this: