如何使用下面列表中所选项目的相同数据并将其显示在另一个页面上,类似于 Android 中的 Intents。
这是 HTML 中列表的布局:
<body>
<div>
<img src="./res/Logo.png" alt="App Logo" class="logo">
</div>
<ul id="list">
</ul>
</body>
以下是如何从 Firebase 检索必要的数据:
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
function emergencyItemList(scenario, emergencyType) {
var ul = document.getElementById("list");
var li = document.createElement('li');
var form = document.createElement('form');
var img = document.createElement('img');
img.src = 'Vector.jpg';
img.alt = 'Vector Icon';
var pScenario = document.createElement('p');
pScenario.innerHTML = 'Scenario: ' + scenario;
var pEmergencyType = document.createElement('p');
pEmergencyType.innerHTML = 'Emergency Type: ' + emergencyType;
var a = document.createElement('a');
a.href = 'Maps.html';
var input = document.createElement('input');
input.className = 'btn';
input.type = 'submit';
input.value = 'View Emergency Location';
a.appendChild(input);
form.appendChild(img);
form.appendChild(pScenario);
form.appendChild(pEmergencyType);
form.appendChild(a);
li.appendChild(form);
ul.appendChild(li);
}
function fetchAllData() {
const dbRef = ref(db, 'Admin Users/Emergencies');
get(dbRef).then((snapshot) => {
if (snapshot.exists()) {
snapshot.forEach((childSnapshot) => {
let scenario = childSnapshot.val().Scenario;
let emergencyType = childSnapshot.val().emergencyType;
emergencyItemList(scenario, emergencyType);
});
} else {
console.log("No data available");
}
}).catch((error) => {
console.error(error);
});
}
window.onload = fetchAllData;
我正在从 Firebase 检索数据,这是架构:
"Emergencies": {
"ETNQlDMHTcUPwWnAWteNBdznzNu2": {
"Scenario": "Scenario 2",
"emergencyType": "Medical Assistance",
}
}
有什么方法可以像 Android 上那样做到这一点吗?
当然我们可以在 Android 中做到这一点。 这是一个例子。
XML代码如下。
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/hView"
android:layout_centerVertical="true"
>
<LinearLayout
android:id="@+id/ly_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
Java代码如下。
final LayoutInflater inflater = LayoutInflater.from(activity);
ly_container.removeAllViews();
从 Firebase 实时数据库读取数据。
FirebaseDatabase.getInstance().getReference().child("table").addValueEventListener (new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot snapshot) {
if (MyUtils.cur_user != null) {
array_user.clear();
if (snapshot.exists()) {
for (DataSnapshot datas: snapshot.getChildren()) {
User user = datas.getValue(User.class);
View view = inflater.inflate(R.layout.cell_user, null);
TextView txt_name = view.findViewById(R.id.txt_name);
txt_name.setText(user.name);
ly_header_container.addView(view);
}
}
}
}
@Override
public void onCancelled(@NonNull DatabaseError error) {
}
});
因此,我们可以在水平滚动视图中看到所有用户