In my current project, I am trying to extract data from a JSON array. Here is my approach:
Below is the jQuery/JavaScript code I used to generate and retrieve data, particularly focusing on the nodes object which determines different layouts:
var getPosts = function() {
$.ajax({
url: '/wp-json/posts?type=case-studies',
data: {
filter: {
'name': _last
}
},
success: function ( dataS ) {
//List some global variables here to fetch post data
// We use base as our global object to find resources we need
var base = dataS[0];
console.log(base);
var postContent = base.content;
var postTitle = base.title;
// Main Image ACF object
var featuredImage = base.meta.main_image;
// Gallery ACF object
var nodes = base.meta.work_content;
// Simple ACF object
//var textArea = base.meta.work_content[1];
var items = [];
for(var i = 0; i < nodes.length; i++)
{
var layout = nodes[i];
var layoutNames = layout.acf_fc_layout;
items.push( layout.acf_fc_layout['gallery']);
console.log(layout);
};
$('<div>', {
"class":'loaded',
html:items.join('')
}).appendTo(projectContainer);
},
cache: false
});
};
** edited here with json itself **
The json file here
The order in which these items appear is crucial and cannot be altered. My goal is to individually retrieve each object and insert them into a container using various markup layouts.
Each object has a unique key called acf_fc_layout, so my question is how can I distinguish between the different data based on this key and apply distinct markup for each one? I understand that some may require additional loops to fetch images, etc., and I am prepared for that. It's important to note that there might be multiple instances of the same acf_fc_layout item but with varying content.
Cheers