Difficulty accessing specific data elements

[powertoaster]

Newbie here:
My <x-data=insertedData> inserts data directly and If insertedData is a simple literal string representation it works perfectly.

{
contacts: [
{title: 'Title 1', name: 'name1'},
{title: 'Title 3', name: 'name2'},
{title: 'Title 4', name: 'name3'},
{title: 'Title 5', name: 'name4'}
],
formFields: [
{id: 1 , type: 'email' , small: 'We\'ll never share your email with anyone else.' , placeholder: 'Enter Email'} ,
{id: 2 , type: 'password' , small: '' , placeholder: 'password'} ,
{id: 3 , type: 'checkbox' , small: '' , placeholder: ''} ,
{id: 4 , type: 'text' , small: '' , placeholder: 'Some Text'},
{id: 5 , type: 'textSpecial' , small: 'Hi there' , placeholder: 'Some Other Text'}
]
}

But if inserted data is a json string of the same data ie:

{"contacts":[{"title":"Title 1","name":"name1"},{"title":"Title 3","name":"name2"},{"title":"Title 4","name":"name3"},{"title":"Title 5","name":"name4"}],"formFields":[{"small":"We will never share your email with anyone else.","id":1,"type":"email","placeholder":"Enter Email"},{"small":"","id":2,"type":"password","placeholder":"password"},{"small":"","id":3,"type":"checkbox","placeholder":""},{"small":"","id":4,"type":"text","placeholder":"Some Text"},{"small":"Hi there","id":5,"type":"textSpecial","placeholder":"Some Other Text"}]}

I get strange results:
For example If I do:

<template x-for="formField in formFields" >
			<span x-text="JSON.stringify(formField, null, 4)"></span>
			<span x-text="formField.type"></span>

I see in the stringify span what appears to be the correct data, and it displays it the correct number of times:
{ "placeholder": "Enter Email", "small": "We will never share your email with anyone else.", "id": 1, "type": "email" }

But I am unable to see the second span which should contain the formField.type 'text' .
And in a following template:

<template x-if="formField.type == 'text'">

The template does not render.
What am I missing here, should I not be inserting a json string?
Should I be parsing that string, if so how and where?

[SimoTod]

an x-for template can only have one child (https://alpinejs.dev/directives/for)

Put both spam tags inside a div (https://codepen.io/SimoTod/pen/jOegyLR?editors=1111)

[powertoaster]

Thank you,
Something that I already knew but just plain missed.
I guess that this is one of the reasons it is difficult to program alone.
Sometimes you cannot see the forest for the trees.