How to display the `extra` object, how to access its `name` and `value`?

When using AnQiCMS to manage website content, the flexibility of the document model custom fields is one of its highlights.These custom fields allow us to add unique properties for different types of documents (such as articles, products, etc.), greatly enriching the content dimension.extrain the object.

UnderstandingextraThe structure of the object and how to extract the required information is crucial for developers or content managers.extraThe design of the object is very intuitive, it is essentially a collection of key-value pairs, where each key (key) corresponds to the 'field_name' of the custom field in the document model.This call name is specified when we set up custom fields in the background, it is usually a string in English, convenient for program recognition and access.

When we go througharchive/detailorarchive/listWhen this interface retrieves document data, the JSON structure returned will contain onedatafield, andextrathe object is located atdataThe same level of field. For example, in a document detail response, you might see a similar structure snippet:

"extra": {
  "author": {
    "name": "作者",
    "value": "AnqiCMS",
    "default": ""
  },
  "certificate": {
    "name": "学历",
    "value": null,
    "default": null
  },
  "city": {
    "name": "城市",
    "value": "北京\n上海\n重庆\n广州\n天津",
    "default": "北京\n上海\n重庆\n广州\n天津"
  }
}

From this example, we can clearly see that,extraIt includes multiple custom field objects, such asauthor/certificateandcityEach custom field object also includes three core attributes:

• nameThis is the display name of the custom field, which is the Chinese name we see on the backend management interface (for example, "authorThis property is mainly used for front-end display, allowing users to intuitively understand the meaning of the field.
• value: This is the actual value of the custom field entered or stored. It represents the specific content entered by the user for this particular document. If the field has not been filled in, or its value is empty,valueMay be displayed asnullOr an empty string.
• defaultThis is the default value of the custom field. If the field is not explicitly assigned a value when creating the document, it will use the value defined here.

To accessextrafield of the object with specific customnameandvalueThe process is very direct. First, you need to get toextraThe object itself. Assuming we have received the complete document data through an API request and stored it in a variable namedresponse. Then,extrathe object can be accessed byresponse.data.extra.

Next, if you want to get the name of the custom field named "author" (by calling namedauthor), you can do this:

• Get the field name:response.data.extra.author.nameThis will return “author”.
• Get field value:response.data.extra.author.valueThis will return “AnqiCMS”.

Similarly, for the field “education” (namedcertificate), you can access byresponse.data.extra.certificate.nameObtain the "education level" and passresponse.data.extra.certificate.valueGet its current value (in this example it isnull), indicating not filled out. Forcity.response.data.extra.city.valueIt will return a string containing multiple city names, indicating that the field may be set to a multi-select or multi-line text type.

This structure design makes the expansion of custom fields extremely flexible. No matter how many custom fields you add to the document model, they will always be presented in this unified and easy-to-parse format.extraIn the object. This not only facilitates the dynamic rendering of the front-end page, but also provides great convenience for subsequent data processing and business logic implementation.

It is worth mentioning that Anqi CMS also providesarchive/paramsan interface that can be used to obtain the definition information of all custom fields under a document model (or a specific document), including theirname/field_name/typeetc. althougharchive/paramsThe interface returns the "blueprint" of the field, andextraThe field directly provides the filled 'content', but combining them helps us fully understand and utilize the custom field function. For example, when building a form or list header, you can first go througharchive/paramsGet all possible field names and types, then according toextrafill in the content with the actual values.

In summary,extraThe object is a powerful manifestation of AnQi CMS in content organization, it presents the custom fields in the document model in a structured and accessible way, providing great convenience for content operation and development work.Mastering its usage will allow you to manage and utilize the website's various content resources more efficiently.

Frequently Asked Questions (FAQ)

1. If the custom field is not filled in,extraWithin the objectvaluewhat will be displayed?If a custom field is not filled in,extraitsvalueproperty will usually be displayed asnullor an empty string""It depends on the field type and the storage method behind the scenes. In some cases, if a field has not been set at all, it may not even appear.extraIn an object, it is best to check for null values or the existence of properties when processing.

2.extraIs the order of fields in an object fixed? extraAn object itself is a collection of key-value pairs, the order of the internal fields is typically not guaranteed to be fixed, depending on the programming language and the implementation of the JSON parser. If you need fields in a specific order, it is usually recommended to do so in the frontend according tonameorfield_nameSort properties or extract as needed. If you want to retrieve all custom fields while maintaining the order in which they were defined in the background, consider usingarchive/paramsthe interface, which is set in thesorted=trueit will return a field array in the order defined.

3. How to iterate over an object in a front-end page.extraand display all custom fields?In the front end (for example using JavaScript), you can usefor...inloop orObject.keys()/Object.values()/Object.entries()methods to traverseextraobjects. For example, usingObject.entries(response.data.extra)It will return an array containing all custom field key-value pairs, you can iterate over this array, and then process each[key, item]throughitem.nameto get the display name,item.valueGet the field value to dynamically display this custom information on the page.