How to display value from SharePoint list to web page
1
I have a code that take the value from SharePoint List using REST (ajax), as shown as below:
function getItems() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Network Tech')/items",
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
success: function(data) {
data = data.d.results;
console.log(data);
$.each(data, function(index, value) {
var value = value.Service;
});
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}
I also have a HTML code for the web page, as shown as below:
<body>
<div class="container">
<div class="col-sm-1">
<h3><br><br>Networking<br></h3>
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading panel-bg-1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#" href="#0101" id="v1">Virtual Networking<br></a>
</h4>
</div>
<div id="0101" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Right now I want to take the value from SharePoint List and display it inside the panel-body. I know how to display it on table but I don't know how to do it on this one. Please help me on this.
javascript sharepoint
asked Nov 19 '18 at 6:36
DarXDarX
106
add a comment |
1
I have a code that take the value from SharePoint List using REST (ajax), as shown as below:
function getItems() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Network Tech')/items",
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
success: function(data) {
data = data.d.results;
console.log(data);
$.each(data, function(index, value) {
var value = value.Service;
});
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}
I also have a HTML code for the web page, as shown as below:
<body>
<div class="container">
<div class="col-sm-1">
<h3><br><br>Networking<br></h3>
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading panel-bg-1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#" href="#0101" id="v1">Virtual Networking<br></a>
</h4>
</div>
<div id="0101" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Right now I want to take the value from SharePoint List and display it inside the panel-body. I know how to display it on table but I don't know how to do it on this one. Please help me on this.
javascript sharepoint
asked Nov 19 '18 at 6:36
DarXDarX
106
Change yourpanel-bodyto an ID (or add an ID to it), then look at how to dynamically create a table and add it to the ID Div. No need to add KnockoutJS or any other libraries. Vanilla works fine.
– Matt
Nov 20 '18 at 12:25
Thank you Matt...
– DarX
Nov 21 '18 at 1:55
add a comment |
1
1
1
I have a code that take the value from SharePoint List using REST (ajax), as shown as below:
function getItems() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Network Tech')/items",
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
success: function(data) {
data = data.d.results;
console.log(data);
$.each(data, function(index, value) {
var value = value.Service;
});
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}
I also have a HTML code for the web page, as shown as below:
<body>
<div class="container">
<div class="col-sm-1">
<h3><br><br>Networking<br></h3>
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading panel-bg-1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#" href="#0101" id="v1">Virtual Networking<br></a>
</h4>
</div>
<div id="0101" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Right now I want to take the value from SharePoint List and display it inside the panel-body. I know how to display it on table but I don't know how to do it on this one. Please help me on this.
javascript sharepoint
asked Nov 19 '18 at 6:36
DarXDarX
106
I have a code that take the value from SharePoint List using REST (ajax), as shown as below:
function getItems() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Network Tech')/items",
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
success: function(data) {
data = data.d.results;
console.log(data);
$.each(data, function(index, value) {
var value = value.Service;
});
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}
I also have a HTML code for the web page, as shown as below:
<body>
<div class="container">
<div class="col-sm-1">
<h3><br><br>Networking<br></h3>
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading panel-bg-1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#" href="#0101" id="v1">Virtual Networking<br></a>
</h4>
</div>
<div id="0101" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Right now I want to take the value from SharePoint List and display it inside the panel-body. I know how to display it on table but I don't know how to do it on this one. Please help me on this.
javascript sharepoint
javascript sharepoint
asked Nov 19 '18 at 6:36
DarXDarX
106
asked Nov 19 '18 at 6:36
DarXDarX
106
asked Nov 19 '18 at 6:36
DarXDarX
106
asked Nov 19 '18 at 6:36
DarXDarX
106
asked Nov 19 '18 at 6:36
DarXDarX
106
106
Change yourpanel-bodyto an ID (or add an ID to it), then look at how to dynamically create a table and add it to the ID Div. No need to add KnockoutJS or any other libraries. Vanilla works fine.
– Matt
Nov 20 '18 at 12:25
Thank you Matt...
– DarX
Nov 21 '18 at 1:55
add a comment |
Change yourpanel-bodyto an ID (or add an ID to it), then look at how to dynamically create a table and add it to the ID Div. No need to add KnockoutJS or any other libraries. Vanilla works fine.
– Matt
Nov 20 '18 at 12:25
Thank you Matt...
– DarX
Nov 21 '18 at 1:55
Change your
panel-body to an ID (or add an ID to it), then look at how to dynamically create a table and add it to the ID Div. No need to add KnockoutJS or any other libraries. Vanilla works fine.– Matt
Nov 20 '18 at 12:25
Change your
panel-body to an ID (or add an ID to it), then look at how to dynamically create a table and add it to the ID Div. No need to add KnockoutJS or any other libraries. Vanilla works fine.– Matt
Nov 20 '18 at 12:25
Thank you Matt...
– DarX
Nov 21 '18 at 1:55
Thank you Matt...
– DarX
Nov 21 '18 at 1:55
add a comment |
1 Answer
1
active
oldest
votes
0
You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
1
wow that's like a new things for me... I don't even have experience on KnockoutJS...haha... but thank you for the reply...
– DarX
Nov 19 '18 at 8:00
Not only KnockoutJS, You can also use it for the VueJS as well.
– Sandun Isuru Niraj
Nov 19 '18 at 8:34
1
Noted. Thank you very much
– DarX
Nov 19 '18 at 8:43
Hey, If it worked mark this thread as correct.
– Sandun Isuru Niraj
Nov 19 '18 at 9:41
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
});
}
});
draft saved
draft discarded
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%2f53369457%2fhow-to-display-value-from-sharepoint-list-to-web-page%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
0
You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
1
wow that's like a new things for me... I don't even have experience on KnockoutJS...haha... but thank you for the reply...
– DarX
Nov 19 '18 at 8:00
Not only KnockoutJS, You can also use it for the VueJS as well.
– Sandun Isuru Niraj
Nov 19 '18 at 8:34
1
Noted. Thank you very much
– DarX
Nov 19 '18 at 8:43
Hey, If it worked mark this thread as correct.
– Sandun Isuru Niraj
Nov 19 '18 at 9:41
add a comment |
0
You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
1
wow that's like a new things for me... I don't even have experience on KnockoutJS...haha... but thank you for the reply...
– DarX
Nov 19 '18 at 8:00
Not only KnockoutJS, You can also use it for the VueJS as well.
– Sandun Isuru Niraj
Nov 19 '18 at 8:34
1
Noted. Thank you very much
– DarX
Nov 19 '18 at 8:43
Hey, If it worked mark this thread as correct.
– Sandun Isuru Niraj
Nov 19 '18 at 9:41
add a comment |
0
0
0
You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
answered Nov 19 '18 at 6:52
Sandun Isuru NirajSandun Isuru Niraj
16410
16410
1
wow that's like a new things for me... I don't even have experience on KnockoutJS...haha... but thank you for the reply...
– DarX
Nov 19 '18 at 8:00
Not only KnockoutJS, You can also use it for the VueJS as well.
– Sandun Isuru Niraj
Nov 19 '18 at 8:34
1
Noted. Thank you very much
– DarX
Nov 19 '18 at 8:43
Hey, If it worked mark this thread as correct.
– Sandun Isuru Niraj
Nov 19 '18 at 9:41
add a comment |
1
wow that's like a new things for me... I don't even have experience on KnockoutJS...haha... but thank you for the reply...
– DarX
Nov 19 '18 at 8:00
Not only KnockoutJS, You can also use it for the VueJS as well.
– Sandun Isuru Niraj
Nov 19 '18 at 8:34
1
Noted. Thank you very much
– DarX
Nov 19 '18 at 8:43
Hey, If it worked mark this thread as correct.
– Sandun Isuru Niraj
Nov 19 '18 at 9:41
1
1
wow that's like a new things for me... I don't even have experience on KnockoutJS...haha... but thank you for the reply...
– DarX
Nov 19 '18 at 8:00
wow that's like a new things for me... I don't even have experience on KnockoutJS...haha... but thank you for the reply...
– DarX
Nov 19 '18 at 8:00
Not only KnockoutJS, You can also use it for the VueJS as well.
– Sandun Isuru Niraj
Nov 19 '18 at 8:34
Not only KnockoutJS, You can also use it for the VueJS as well.
– Sandun Isuru Niraj
Nov 19 '18 at 8:34
1
1
Noted. Thank you very much
– DarX
Nov 19 '18 at 8:43
Noted. Thank you very much
– DarX
Nov 19 '18 at 8:43
Hey, If it worked mark this thread as correct.
– Sandun Isuru Niraj
Nov 19 '18 at 9:41
Hey, If it worked mark this thread as correct.
– Sandun Isuru Niraj
Nov 19 '18 at 9:41
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53369457%2fhow-to-display-value-from-sharepoint-list-to-web-page%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
Change your
panel-bodyto an ID (or add an ID to it), then look at how to dynamically create a table and add it to the ID Div. No need to add KnockoutJS or any other libraries. Vanilla works fine.– Matt
Nov 20 '18 at 12:25
Thank you Matt...
– DarX
Nov 21 '18 at 1:55