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

Incorporating a separate PHP file which includes JavaScript code

I've been struggling to make this code work. In my footer file, I have the following: footer.php: <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: '', type: 'GET', dataType: "script", success: ...

What is the mechanism behind the functionality of the input type=number spinner in browsers?

I want to recreate the spinner feature found in input type=number. <input type=number step=0.3/> When clicking on the up arrow of the spinner, the value increases by 0.3 (0.3, 0.6 , 0.9 , 1.2 , 1.5 ...etc). However, if the current value is 1.4 and ...

Any suggestions on how to incorporate the variable into the inline JavaScript [[]] API path?

I have a query regarding creating a URL in JavaScript, but I'm unsure how to include variables within th:inline="javascript". Below is my code snippet: <script th:inline="javascript"> $(function() { $('#querySubmit').click(queryS ...

Adding content to an empty element will not produce the desired result

I'm trying to show each character of a string, which is stored in an array, one at a time. However, when I use threadsleep(a) with the code found here: http://jsfiddle.net/thefiddler99/re3qpuoo/, all the characters are displayed at once. There seems t ...

Vue routing stops working when there is no hash in the URL (no designated input file)

I am facing the need to operate Vue router in its default mode, known as hash mode, and unable to use it in history mode. In this mode, all my dynamic routes have a leading hash, like http://myurl.com/#/highlights. However, removing that initial hash, such ...

The combination of setInterval() and if(confirm()) is not possible in pure JavaScript

One day, I encountered a simple if(confirm()) condition like this: if(confirm('Some question')) { agreed_function(); } else { cancel_function(); } function agreed_function() { console.log('OK'); } function cancel_function( ...

Steps to have the initial link redirect to a designated webpage

I am working with tables that have links defined in the HTML. I want to modify the behavior so that the first link opens a different URL, for example: john.com. Is it possible to achieve this? Specifically, I want the link associated with the first name ( ...

Protractor struggles to locate mobile values in the HTML DOM despite Selenium's capabilities

I recently encountered an issue while attempting to scrape data for mobile test cases. The code snippet below works flawlessly for desktop, but on mobile it fails to find the desired element (resulting in an empty console log). Interestingly, when I print ...

Adjust the size of an HTML image for printing using a JavaScript window.print() function

On my website, I have a print option set up where specific elements are hidden using @media. How can I adjust the size of an image within the @media query when my JavaScript print function is triggered? I am able to modify a regular div element easily, but ...

What is the best way to retrieve app.state in a Remix project when running a Cypress test?

One way Cypress can expose an app's state to the test runner is by using the following approach in React: class MyComponent extends React.Component { constructor (props) { super(props) // only expose the app during E2E tests if (window.C ...

Retrieve information from a database using PHP and assign it to a JavaScript variable

I need to display a Google map marker on my website, with the latitude and longitude values coming from the database in the columns labeled latitude and longitude. Here is the initial JavaScript code: var map; function initialize() { map = new GMaps( ...

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

I have set up my navigation tabs using Bootstrap 3 in the following way: <ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;"> <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Pr ...

What is the process for obtaining a compilation of warnings from the next.js terminal?

While running my project on VScode, I noticed a series of warnings appearing in the terminal. One specific warning that caught my attention is: The `bg-variant` mixin has been deprecated as of v4.4.0. It will be removed entirely in v5. on line 8 ...

Creating a rectangular pyramid using three.js r68: a step-by-step guide

Currently working on r68, I'm in search of a modern example showcasing the creation of a rectangular pyramid that will allow me to implement THREE.MeshFaceMaterial(). Many existing examples are outdated and lead to errors with my current setup. My re ...

What is the best way to update my component when the selected value is changed?

Currently, I am facing an issue with my map component. It plots polyline data based on the option selected from the select menu component. The problem arises when I change the value in the select menu and click the play button for the animation. Instead of ...

Having trouble deciphering this snippet of Express JS source code

Upon reviewing the Express JS source code, I came across the main module where express is being exported. module.exports = createApplication; function createApplication() { var app = function(req, res, next) { app.handle(req, res, next); }; m ...

Learn how to extract information from a JSON data array and seamlessly integrate it into an ObservableCollection using C# in Xamarin

Reviewing my JSON data { "found": 501, "posts": [ { "ID": 2500, "site_ID": 1, "date": "2014-09-26T15:58:23-10:00", "modified": "2014-09-26T15:58:23-10:00", "title": "DOD HQ Visitors Parking", "metadata": [ { "id": "15064", "key": "city", ...

Formatting numbers in Angular 2 to include a space every three zeros in a money amount

Let's say I have the number 30000 and I want to format it as 30 000. What method should I use to achieve this? Here are more examples: 300000 -> 300 000, 3000000 -> 3 000 000. Just to clarify, this is not about using dots or commas, but rathe ...

JavaScript file encountering a Typescript issue with a property defined in a subclass

Currently, I am utilizing Typescript to validate my Javascript files. One issue I have encountered is that when I inherit from a class, Typescript does not recognize the types of the properties in the parent class. I am unsure if I am overlooking something ...

How can I create a cube with complete beveling using Three.js?

I'm struggling to create a beveled cube in my project. I have come across the THREE.ExtrudeGeometry snippet in the documentation here. However, when I tried it out, I only managed to achieve beveled sides on the top and bottom faces like this: https: ...