Get JSON data from URL and populate HTML text and disable button based on value
Newbie here trying to get a landing page for a charity to pull in data using JSON and essentially count down the number of items left in inventory and display that in the HTML, then when the inventory reaches 0 disable the button and change the style on the button. I have been provied a URL with JSON data that looks like this:
0:
Name: "Main Campaign"
TotalInventory: 18
AmountRaised: 2200
remainingInventory: 4
1:
Name: "Main Campaign - Child 1"
TotalInventory: 10
AmountRaised: 1000
remainingInventory: 0
2:
Name: "Main Campaign - Child 2"
TotalInventory: 5
AmountRaised: 100
remainingInventory: 3
3:
Name: "Main Campaign - Child 3"
TotalInventory: 3
AmountRaised: 1000
remainingInventory: 1
On the landing page there are 3 different items each with a different inventory amount associated with them. When the inventory number changes in the database it is populated in the JSON URL in real-time and the hope is the landing page will reflect that.
The landing page has 3 different boxes with the same layout that looks like this:
<div class="col-md-4">
<div class="card mb-5 light-blue">
<div class="amount"><h4>10 left</h4></div>
<img class="card-img-top" src="images/donation.jpg" alt="Donation">
<div class="card-body">
<h4>Donation 1</h4>
<p class="card-text">Donation description goes here</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">Donate $50</button>
</div>
</div>
</div>
</div>
javascript jquery html json
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
add a comment |
Newbie here trying to get a landing page for a charity to pull in data using JSON and essentially count down the number of items left in inventory and display that in the HTML, then when the inventory reaches 0 disable the button and change the style on the button. I have been provied a URL with JSON data that looks like this:
0:
Name: "Main Campaign"
TotalInventory: 18
AmountRaised: 2200
remainingInventory: 4
1:
Name: "Main Campaign - Child 1"
TotalInventory: 10
AmountRaised: 1000
remainingInventory: 0
2:
Name: "Main Campaign - Child 2"
TotalInventory: 5
AmountRaised: 100
remainingInventory: 3
3:
Name: "Main Campaign - Child 3"
TotalInventory: 3
AmountRaised: 1000
remainingInventory: 1
On the landing page there are 3 different items each with a different inventory amount associated with them. When the inventory number changes in the database it is populated in the JSON URL in real-time and the hope is the landing page will reflect that.
The landing page has 3 different boxes with the same layout that looks like this:
<div class="col-md-4">
<div class="card mb-5 light-blue">
<div class="amount"><h4>10 left</h4></div>
<img class="card-img-top" src="images/donation.jpg" alt="Donation">
<div class="card-body">
<h4>Donation 1</h4>
<p class="card-text">Donation description goes here</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">Donate $50</button>
</div>
</div>
</div>
</div>
javascript jquery html json
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
Your first snippet block is not JSON. Can you please show us the actual JSON?
– Taplar
Nov 23 '18 at 17:52
That is what is displaying at the url, the raw data tab shows this: [{ "Name" : "Main Campaign","TotalInventory" : 18,"AmountRaised" : 2200,"remainingInventory" : 4 },{ "Name" : "Main Campaign - Child 1","TotalInventory" : 10,"AmountRaised" : 1000,"remainingInventory" : 0 },{ "Name" : "Main Campaign - Child 2","TotalInventory" : 5,"AmountRaised" : 100,"remainingInventory" : 3 },{ "Name" : "Main Campaign - Child 3","TotalInventory" : 3,"AmountRaised" : 1000,"remainingInventory" : 1 }]
– Cloudwalker
Nov 23 '18 at 18:10
add a comment |
Newbie here trying to get a landing page for a charity to pull in data using JSON and essentially count down the number of items left in inventory and display that in the HTML, then when the inventory reaches 0 disable the button and change the style on the button. I have been provied a URL with JSON data that looks like this:
0:
Name: "Main Campaign"
TotalInventory: 18
AmountRaised: 2200
remainingInventory: 4
1:
Name: "Main Campaign - Child 1"
TotalInventory: 10
AmountRaised: 1000
remainingInventory: 0
2:
Name: "Main Campaign - Child 2"
TotalInventory: 5
AmountRaised: 100
remainingInventory: 3
3:
Name: "Main Campaign - Child 3"
TotalInventory: 3
AmountRaised: 1000
remainingInventory: 1
On the landing page there are 3 different items each with a different inventory amount associated with them. When the inventory number changes in the database it is populated in the JSON URL in real-time and the hope is the landing page will reflect that.
The landing page has 3 different boxes with the same layout that looks like this:
<div class="col-md-4">
<div class="card mb-5 light-blue">
<div class="amount"><h4>10 left</h4></div>
<img class="card-img-top" src="images/donation.jpg" alt="Donation">
<div class="card-body">
<h4>Donation 1</h4>
<p class="card-text">Donation description goes here</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">Donate $50</button>
</div>
</div>
</div>
</div>
javascript jquery html json
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
Newbie here trying to get a landing page for a charity to pull in data using JSON and essentially count down the number of items left in inventory and display that in the HTML, then when the inventory reaches 0 disable the button and change the style on the button. I have been provied a URL with JSON data that looks like this:
0:
Name: "Main Campaign"
TotalInventory: 18
AmountRaised: 2200
remainingInventory: 4
1:
Name: "Main Campaign - Child 1"
TotalInventory: 10
AmountRaised: 1000
remainingInventory: 0
2:
Name: "Main Campaign - Child 2"
TotalInventory: 5
AmountRaised: 100
remainingInventory: 3
3:
Name: "Main Campaign - Child 3"
TotalInventory: 3
AmountRaised: 1000
remainingInventory: 1
On the landing page there are 3 different items each with a different inventory amount associated with them. When the inventory number changes in the database it is populated in the JSON URL in real-time and the hope is the landing page will reflect that.
The landing page has 3 different boxes with the same layout that looks like this:
<div class="col-md-4">
<div class="card mb-5 light-blue">
<div class="amount"><h4>10 left</h4></div>
<img class="card-img-top" src="images/donation.jpg" alt="Donation">
<div class="card-body">
<h4>Donation 1</h4>
<p class="card-text">Donation description goes here</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary">Donate $50</button>
</div>
</div>
</div>
</div>
javascript jquery html json
javascript jquery html json
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
edited Nov 23 '18 at 19:06
Zoe
11.8k74479
11.8k74479
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
asked Nov 23 '18 at 17:51
CloudwalkerCloudwalker
1
1
Your first snippet block is not JSON. Can you please show us the actual JSON?
– Taplar
Nov 23 '18 at 17:52
That is what is displaying at the url, the raw data tab shows this: [{ "Name" : "Main Campaign","TotalInventory" : 18,"AmountRaised" : 2200,"remainingInventory" : 4 },{ "Name" : "Main Campaign - Child 1","TotalInventory" : 10,"AmountRaised" : 1000,"remainingInventory" : 0 },{ "Name" : "Main Campaign - Child 2","TotalInventory" : 5,"AmountRaised" : 100,"remainingInventory" : 3 },{ "Name" : "Main Campaign - Child 3","TotalInventory" : 3,"AmountRaised" : 1000,"remainingInventory" : 1 }]
– Cloudwalker
Nov 23 '18 at 18:10
add a comment |
Your first snippet block is not JSON. Can you please show us the actual JSON?
– Taplar
Nov 23 '18 at 17:52
That is what is displaying at the url, the raw data tab shows this: [{ "Name" : "Main Campaign","TotalInventory" : 18,"AmountRaised" : 2200,"remainingInventory" : 4 },{ "Name" : "Main Campaign - Child 1","TotalInventory" : 10,"AmountRaised" : 1000,"remainingInventory" : 0 },{ "Name" : "Main Campaign - Child 2","TotalInventory" : 5,"AmountRaised" : 100,"remainingInventory" : 3 },{ "Name" : "Main Campaign - Child 3","TotalInventory" : 3,"AmountRaised" : 1000,"remainingInventory" : 1 }]
– Cloudwalker
Nov 23 '18 at 18:10
Your first snippet block is not JSON. Can you please show us the actual JSON?
– Taplar
Nov 23 '18 at 17:52
Your first snippet block is not JSON. Can you please show us the actual JSON?
– Taplar
Nov 23 '18 at 17:52
That is what is displaying at the url, the raw data tab shows this: [{ "Name" : "Main Campaign","TotalInventory" : 18,"AmountRaised" : 2200,"remainingInventory" : 4 },{ "Name" : "Main Campaign - Child 1","TotalInventory" : 10,"AmountRaised" : 1000,"remainingInventory" : 0 },{ "Name" : "Main Campaign - Child 2","TotalInventory" : 5,"AmountRaised" : 100,"remainingInventory" : 3 },{ "Name" : "Main Campaign - Child 3","TotalInventory" : 3,"AmountRaised" : 1000,"remainingInventory" : 1 }]
– Cloudwalker
Nov 23 '18 at 18:10
That is what is displaying at the url, the raw data tab shows this: [{ "Name" : "Main Campaign","TotalInventory" : 18,"AmountRaised" : 2200,"remainingInventory" : 4 },{ "Name" : "Main Campaign - Child 1","TotalInventory" : 10,"AmountRaised" : 1000,"remainingInventory" : 0 },{ "Name" : "Main Campaign - Child 2","TotalInventory" : 5,"AmountRaised" : 100,"remainingInventory" : 3 },{ "Name" : "Main Campaign - Child 3","TotalInventory" : 3,"AmountRaised" : 1000,"remainingInventory" : 1 }]
– Cloudwalker
Nov 23 '18 at 18:10
add a comment |
1 Answer
1
active
oldest
votes
To fetch your data, use fetch(), or XMLHttpRequest, depending on which browsers your site needs to support. Once you have the response as a string, just run the JSON.parse() function on it, and you'll end up with the array your JSON data represents.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
After that, just perform the DOM manipulations to update your site.
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451096%2fget-json-data-from-url-and-populate-html-text-and-disable-button-based-on-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
To fetch your data, use fetch(), or XMLHttpRequest, depending on which browsers your site needs to support. Once you have the response as a string, just run the JSON.parse() function on it, and you'll end up with the array your JSON data represents.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
After that, just perform the DOM manipulations to update your site.
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
add a comment |
To fetch your data, use fetch(), or XMLHttpRequest, depending on which browsers your site needs to support. Once you have the response as a string, just run the JSON.parse() function on it, and you'll end up with the array your JSON data represents.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
After that, just perform the DOM manipulations to update your site.
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
add a comment |
To fetch your data, use fetch(), or XMLHttpRequest, depending on which browsers your site needs to support. Once you have the response as a string, just run the JSON.parse() function on it, and you'll end up with the array your JSON data represents.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
After that, just perform the DOM manipulations to update your site.
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
To fetch your data, use fetch(), or XMLHttpRequest, depending on which browsers your site needs to support. Once you have the response as a string, just run the JSON.parse() function on it, and you'll end up with the array your JSON data represents.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
After that, just perform the DOM manipulations to update your site.
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
answered Nov 23 '18 at 19:46
Aanand KainthAanand Kainth
393113
393113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451096%2fget-json-data-from-url-and-populate-html-text-and-disable-button-based-on-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your first snippet block is not JSON. Can you please show us the actual JSON?
– Taplar
Nov 23 '18 at 17:52
That is what is displaying at the url, the raw data tab shows this: [{ "Name" : "Main Campaign","TotalInventory" : 18,"AmountRaised" : 2200,"remainingInventory" : 4 },{ "Name" : "Main Campaign - Child 1","TotalInventory" : 10,"AmountRaised" : 1000,"remainingInventory" : 0 },{ "Name" : "Main Campaign - Child 2","TotalInventory" : 5,"AmountRaised" : 100,"remainingInventory" : 3 },{ "Name" : "Main Campaign - Child 3","TotalInventory" : 3,"AmountRaised" : 1000,"remainingInventory" : 1 }]
– Cloudwalker
Nov 23 '18 at 18:10