JSON component doesn't seem to use collection Variable to iterate over JSON data

Advanced Development
1

I’m having issues using a separate JSON file to pull in data to a page. I want to use liquid to build the page, but for some reason I’m not getting the collection variable to iterate the data. I can get some data out by using [0] with the collectionVariable, but it only gets the item at that index. I want to loop over all of the items.

Here’s the code I have:

<!--From HTML file---->

{% component type: "json", source_type: "path", source: "/csv_assets/Animals2.json", collectionVariable: "animalList", layout: "" %}

<div class="row row-cols-1 row-cols-md-3">
        {% for item in animalList %}
        <div class="col mb-4">
            <div class="card">
              <img src="{{item.Photo}}" class="card-img-top" alt="photo">
              <div class="card-body">
                <h5 class="card-title">Name: {{item.AnimalName}}</h5>
                <p class="card-text">ID: {{item.AnimalId}}</p>
                <p>Breed: {{item.Breed}}</p>
                <p>Gender: {{item.Gender}}</p>
                <p>Location: {{item.Location}}</p>
              </div>
            </div>
          </div>
{% endfor %}
  </div>


/*--The JSON File @ /csv_assets/Animals2.json*/
[
  {
    "RecordType": "Available",
    "AnimalName": "Ace",
    "AnimalId": "A0862064",
    "AnimalType": "Dog",
    "OtherAnimalType": "",
    "Gender": "Male",
    "AnimalSize": "Large",
    "HorseHeight": "",
	  "Breed": "Domestic SH",
    "Weight": "52.80",
    "Location": "Center",
	  "Photo": "http://location.com"
  },
  {
    "RecordType": "Available",
    "AnimalName": "Adalind",
    "AnimalId": "A0860947",
    "AnimalType": "Cat",
    "OtherAnimalType": "",
    "Gender": "Female",
    "AnimalSize": "Med",
    "HorseHeight": "",
	  "Breed": "Domestic SH",
    "Weight": "9.56",
    "Location": "Center",
	  "Photo": "http://location.com"
  },
  {
    "RecordType": "Available",
    "AnimalName": "Alma",
    "AnimalId": "A0857410",
    "AnimalType": "Dog",
    "OtherAnimalType": "",
    "Gender": "Female",
    "AnimalSize": "Large",
    "HorseHeight": "",
	  "Breed": "Domestic SH",
    "Weight": "73.20",
    "Location": "Center",
	  "Photo": "http://location.com"
  }
]
2

I don’t fully understand why the JSON parser works like this but it seems like it needs a named key to access the array.
So at the moment, your array has no key. If you are able to adjust your JSON file like the below it should work (adding the “items” key around the array):

{ "items":
[
  {
    "RecordType": "Available",
    "AnimalName": "Ace",
    "AnimalId": "A0862064",
    "AnimalType": "Dog",
    "OtherAnimalType": "",
    "Gender": "Male",
    "AnimalSize": "Large",
    "HorseHeight": "",
	  "Breed": "Domestic SH",
    "Weight": "52.80",
    "Location": "Center",
	  "Photo": "http://location.com"
  },
  {
    "RecordType": "Available",
    "AnimalName": "Adalind",
    "AnimalId": "A0860947",
    "AnimalType": "Cat",
    "OtherAnimalType": "",
    "Gender": "Female",
    "AnimalSize": "Med",
    "HorseHeight": "",
	  "Breed": "Domestic SH",
    "Weight": "9.56",
    "Location": "Center",
	  "Photo": "http://location.com"
  },
  {
    "RecordType": "Available",
    "AnimalName": "Alma",
    "AnimalId": "A0857410",
    "AnimalType": "Dog",
    "OtherAnimalType": "",
    "Gender": "Female",
    "AnimalSize": "Large",
    "HorseHeight": "",
	  "Breed": "Domestic SH",
    "Weight": "73.20",
    "Location": "Center",
	  "Photo": "http://location.com"
  }
]
}

And then your forloop:

{% for item in animalList.items %}
...
3

If adjusting the JSON source file is not possible, you could achieve it like this also:
(capturing the JSON file contents first (and adding the key) and changing your JSON parser method to string and feeding it the new captured data)

{% capture data %}{ "items": {% include "/csv_assets/Animals2.json" %} }{% endcapture %}
{% component type:"json", source_type: "string", source: "{{data}}", collectionVariable: "animalList" %}
1 Like
4

I’ll give it a shot and let you know how it goes. Thanks!

5

thank you, using the capture helped.

1 Like