Using Array Data Binding in SAPUI5 for Lists

I am looking to connect a list along with its content to a model.

var listItem = new sap.m.StandardListItem({
        title: "{carDataModel>/cars/1/carId}",
    });

    var list = new sap.m.List("carList", {
      });
    list.bindItems('carDataModel>/cars', listItem);

I have linked the following model to the view:

{  
   "cars":[  
      {  
         "carId":"e7f2b1519ed5",
         "carName":"one",
      },
      {  
         "carId":"f3ab598a85e0",
         "carName":"two",
      }
   ]
}

Currently, my list displays two List Items and I can toggle between values by changing the index from 1 to 0. However, I want the first List Item to show the first carId and the second List Item to display the second carId. Despite trying different syntaxes, I have not been successful as it resulted in an empty List Item.

Appreciate your help!

Answer №1

Your template currently uses an absolute path to refer to the title. Consider updating it to use a relative path that is based on the current item in your list:

var updatedTitle = new sap.m.StandardListItem({
    title: "{carDataModel>carName}",
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An easy way to pass props to a component using useNavigate in React Router

Is it possible to send props directly to a component in React? const goToProjectPage = useNavigate(); useEffect(()=>{ ..... goToProjectPage("/projectpage"); //send props here },[]); ...

W/System.err: The data in the form of an empty array cannot be converted into a JSONObject due to a org.json.JSONException

Currently, I am working on saving data in a MySQL database. The code snippet for this task is as follows: private void uploadMultipart(final String imageData,final String titolo,final String sottotitolo,final String data) { String tag_string_req ...

Tips for retrieving data from a Node.js server with a POST request in a React application

I'm currently working on a MERN authentication project, but I've hit a roadblock. Whenever the information is submitted on my register page, it triggers an add user function on the front end. async function addUser(user) { const config = { ...

Jquery is causing some issues with the code provided:

This is the code snippet from script.js: $(document).ready(function() { $('#mainobject').fadeOut('slow'); }); Here is a glimpse of index.html: <!DOCTYPE html> <html> <head> <title>Hitler Map&l ...

Retrieve the nested dictionary

I have extracted a series of elements from an excel datarow: 'Ars','Cr','Assl','Burg','Consp' My goal is to organize them into a nested dictionary as shown below: data_dict.update({'name':&a ...

Can loading data after the initial page load improve the performance of web page loading?

Is it beneficial to load non-essential data using AJAX immediately after the page loads in order to speed up overall webpage loading time? There are certain modules on my website that are not crucial, so I am currently waiting for the basic content to loa ...

VueJS fails to display table information

I am facing an issue with rendering data from my API using VueJS 2. Although the backend services are successfully sending the data, the HTML table does not display it. There are no errors shown in the debug console, and even the Vue Debug extension for Fi ...

The JSON data did not fully transfer into my AngularJS application

I wrote the code to display country details, but I am only getting partial information from the JSON. I am only able to fetch the country name and population in the output. Could there be an issue with the syntax? <!DOCTYPE HTML> <html ng-app= ...

Ensuring the Persistence of Column State in Material-UI DataGrid/DataGridPro when Adjusting Visibility Using Column Toolbar

We have integrated MUI DataGrid into our React project. Currently, I am exploring options to save the state of columns after toggling their visibility using the DataGrid toolbar column menu. After each re-render, the column setup returns to its default st ...

Exploring the Benefits of Utilizing External APIs in Next JS 13 Server-side Operations

Can someone provide more detail to explain data revalidation in Next JS 13? Please refer to this question on Stack Overflow. I am currently utilizing the new directory features for data fetching in Next JS 13. According to the documentation, it is recomme ...

Tips for bringing a particular tab into focus when a page initially loads

My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...

Connect an Angular Service object to a Controller's Scope and keeping it in sync

I am facing an issue with the interaction between my EmployeeService and EmployeeController. The service contains a specific object which I bind to the controller's scope: app.controller('EmployeeController', function($scope, EmployeeServic ...

Scrolling behavior in two columns with sticky positioning

Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller ...

What is the best way to utilize React JS for mapping?

How do we navigate through nested objects in ReactJS? { "Data1":{ "attribute1":{ "key":"discount", "value":"50% off" }, "attribute2":{ &qu ...

An issue occurred during the hydration process, causing the entire root to switch to client rendering since the error occurred outside of a Suspense boundary

I've started seeing some errors and warnings: Error: An error occurred while hydrating. Since it happened outside of a Suspense boundary, the entire root will switch to client rendering. Error: Hydration failed due to initial UI not matching what was ...

A common inquiry regarding Vue: How to effectively incorporate fullpage.js wrapper with additional functionalities

Having recently delved into Vue, I am currently tackling a project that involves the Fullpage.js Vue wrapper. While I have successfully implemented the Fullpage functionality, integrating additional features like an animation-on-scroll function has proven ...

How can you efficiently access the 'app' object within a distinct route file?

When using Express 4, the default behavior is to load routes from a separate file like so: app.use('/', routes); This would load routes/index.js. I am working with a third-party library that directly interacts with the app object itself. What& ...

After upgrading from Vuetify version 1.5 to 2.0.18, an issue arises with modules not being found

I encountered the following error: module not found error To address this issue, I took the following steps: Commented out import 'vuetify/src/stylus/main.styl' in the src/plugins/vuetify.js file. Added import 'vuetify/src/styles/main. ...

Struggling to implement my reusable React component within a React Bootstrap modal

I have developed a reusable textarea React component: import React from 'react'; import '../form-input/form-input.styles.scss'; const TextAreaComponent = ({ handleChange, label, ...otherProps }) => ( <div className="group"> ...

Experiencing a 404 error after attempting to access an endpoint following a successful MSAL Azure AD

Incorporating the UserAgentApplication.loginPopup function to authenticate users on our Azure AD has been a challenge as we transition from an ASP.NET MVC application to a Vue.js front end and ASP.NET 'API' backend. The goal is to pass the access ...