CARGAR file.json MULTI ARRAY FETCH JS EN UN LIST HTML
Display file.json example multi-dimensional array do fetch get javascript in html list
ChatGPT
To display the data from a multi-dimensional JSON array in an HTML list using JavaScript, you can follow these steps:
Create an HTML file with a placeholder for your list.
Include your JSON data and JavaScript code.
Write JavaScript to fetch and process the JSON data.
Populate the HTML list with the JSON data.
Here's an example of how to do this:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>JSON Array to HTML List</title>
</head>
<body>
<h1>JSON Data in HTML List</h1>
<ul id="myList"></ul>
<script>
// Sample JSON data
var data = [
{
"category": "Fruits",
"items": ["Apple", "Banana", "Orange"]
},
{
"category": "Vegetables",
"items": ["Carrot", "Broccoli", "Tomato"]
}
];
// Get the UL element to populate the list
var myList = document.getElementById("myList");
// Loop through the JSON data and create list items
data.forEach(function (category) {
var li = document.createElement("li");
li.innerHTML = category.category + ": <ul>";
category.items.forEach(function (item) {
li.innerHTML += "<li>" + item + "</li>";
});
li.innerHTML += "</ul>";
myList.appendChild(li);
});
</script>
</body>
</html>
In this example, we have a JSON array with categories and items, and we use JavaScript to populate an HTML list with this data. Adjust the JSON structure and data as needed for your specific use case.
User
siteInfo = {
"name" : "blogger",
"users" : [
[ "admins", "1", "2" , "3"],
[ "editors", "4", "5" , "6"],
]
} do fetch get display javascript html list
ChatGPT
To fetch and display the data from the siteInfo object in an HTML list using JavaScript, you can use the following code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Site Info List</title>
</head>
<body>
<h1>Site Information</h1>
<ul id="siteList"></ul>
<script>
// Sample siteInfo object
var siteInfo = {
"name": "blogger",
"users": [
["admins", "1", "2", "3"],
["editors", "4", "5", "6"]
]
};
// Get the UL element to populate the list
var siteList = document.getElementById("siteList");
// Loop through the users and create list items
siteInfo.users.forEach(function (userGroup) {
var li = document.createElement("li");
li.innerHTML = userGroup[0] + ": <ul>";
for (var i = 1; i < userGroup.length; i++) {
li.innerHTML += "<li>User " + userGroup[i] + "</li>";
}
li.innerHTML += "</ul>";
siteList.appendChild(li);
});
</script>
</body>
</html>
In this example, we access the siteInfo object and iterate through the users array to create an HTML list. The name is displayed as a heading, and each user group is displayed as a list with its respective users. You can adjust the structure and data to match your specific needs.
/////////////////////
Display file.json registers field name and field price with fetch get javascript in html list <ul> <li>
ChatGPT
You can use JavaScript to fetch data from a JSON file and display its fields in an HTML list. Here's an example of how to do it:
Assuming you have a JSON file named "file.json" with the following structure:
json
Copy code
[
{
"name": "Product 1",
"price": 10.99
},
{
"name": "Product 2",
"price": 19.99
},
{
"name": "Product 3",
"price": 5.99
}
]
You can create an HTML file with the following code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>JSON Data</title>
</head>
<body>
<ul id="productList"></ul>
<script>
// Function to fetch the JSON data and display it in a list
fetch('file.json')
.then(response => response.json())
.then(data => {
const productList = document.getElementById('productList');
data.forEach(product => {
const listItem = document.createElement('li');
listItem.textContent = `Name: ${product.name}, Price: $${product.price.toFixed(2)}`;
productList.appendChild(listItem);
});
})
.catch(error => console.error('Error fetching data:', error));
</script>
</body>
</html>
This code will fetch the data from "file.json" and create a list of products in an <ul> element, displaying each product's name and price in individual <li> items.
User
Do document.getElementById("productList").innerHTML
ChatGPT
Certainly, if you want to set the inner HTML of the <ul> element with the id "productList" directly, you can do it like this:
javascript
Copy code
fetch('file.json')
.then(response => response.json())
.then(data => {
const productList = document.getElementById('productList');
let html = '';
data.forEach(product => {
html += `<li>Name: ${product.name}, Price: $${product.price.toFixed(2)}</li>`;
});
productList.innerHTML = html;
})
.catch(error => console.error('Error fetching data:', error));
Comentarios
Publicar un comentario