Page Model Json having issue to retrieve child nodes(Multifield items)

"I want to use sling models to retrieve specific fields using sling models."

To render MF values onto a web page by Sling Models (which is the main use case for using Multi-fields - not to render as JSON)  - its straightforward.

See this Article -- Scott's Digital Community: Creating a HTL Repeating Data Set 6.3 Component that uses Sling Models

There is very little Java code. You Inject the node that represents the Multi field - as shown in the article. The Java code:

package com.htl.community.coral.core.models;

import javax.annotation.PostConstruct;

import javax.inject.Inject;

import javax.inject.Named;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.models.annotations.Default;

import org.apache.sling.models.annotations.Model;

import org.apache.sling.models.annotations.Optional;

import org.apache.sling.settings.SlingSettingsService;

@Model(adaptables = Resource.class)

public class Multifield {

    // Inject the products node under the current node

    @Inject

    @Optional

    public Resource products;

    // No need of a post construct as we don't have anything to modify after the

    // model is constructed

}

Then you can write out the MF values in HTL like this:

<div

    data-sly-use.multiItems="com.htl.community.coral.core.models.Multifield">

    <div data-sly-list.head="${multiItems.products.listChildren}">

        <div style="height:250px;"><img src=${head.pathbr} height=200 width=270 style="padding:4px"/><h2>${head.product}</h2>

                             <p>${head.desc}</p>

                             </div>

                             <hr>

   </div>

</div>

When you render MF values as HTML - the output is shown in the web page. For example:

Hi narendran63116907​ / iainc65537558​

Below steps should resolve your issue

1. Add adapters annotation to your model class like adapters = { ComponentExporter.class }
2. Make your sling model Implement ComponentExporter interface and override getExportedType() method. This method should return the sling:resourceType path for your component