Read data from sharepoint list using json Rest

Question

I have a Sharepoint list( TestList ) with columns Id , Title and address and this list contains number of items. I want to use json rest to retrieve data from the list and bind it to my html which is below

 <div id="mainContent" style="position:absolute;width:100%">
    <h1 style="color: #5e9ca0;">&nbsp;</h1>
<table style="width:100;border: 2px #D3D3D3 solid; border-radius: 10px;">
<tbody>
<tr>
<td align="center"><strong>
    <img src='C:\Users\Critical.png' 
        alt="" style="float: left; text-align: center" /></strong></td>
 <td align="center" bgcolor="#D3D3D3">
  <label id="subject">subject goes here</label>
 </td>
</tr>

<tr>
 <td rowspan="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td align="center" bgcolor="#D3D3D3" width="50%">&nbsp;<strong>Scheduled Start Time&nbsp;</strong> <label id="startTime">16:00&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </label>
             &nbsp;<strong>Scheduled End Time&nbsp;</strong> <label id="endTime">18:00</label>
  </td>

 </tr>
<tr>
<td align="center" bgcolor="#D3D3D3"><label id="status">Started</label></td>
</tr>
<tr>
<td bgcolor="#D3D3D3"><textarea id="StatusBody" disabled="disabled" cols="80" rows="10">Status</textarea></td>
</tr>
<tr>
<td bgcolor="#D3D3D3"><input name="alert" type="checkbox" value="popupalert" /> testting/td>
</tr>
</tbody>
</table>
</div>

I am new to json and trying to do something as below.

<script type="text/javascript">

$(document).ready(function () {

    function getListItemById(webUrl, listName, itemId, success, failure) {
        var url = webUrl + "/_vti_bin/listdata.svc/" + listName + "(" + itemId + ")";
        //var url = "http://abc/sites/category/_api/lists/getbytitle('TestList')/items/getbyid(1)";
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                success(data.d);
                console.log(data.d.Title);
            },
            error: function (data) {
                alert("error");
            }
        });
    }
     });

</script>

What is the correct way to solve this using json rest api?

Answer 1

it could also be a way to get all the items from a SharePoint list

function Read() {
var listName = "MyList";
var url = _spPageContextInfo.webAbsoluteUrl;

getListItems(listName, url, function (data) {
    var items = data.d.results;

    // Add all the new items
    for (var i = 0; i < items.length; i++) {
        alert(items[i].Title + ":" + items[i].Id);
    }
}, function (data) {
    alert("Ooops, an error occured. Please try again");
 });
}

function getListItems(listName, siteurl, success, failure) {
$.ajax({
    url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function (data) {
        success(data);
    },
    error: function (data) {
        failure(data);
    }
   });
}