Adding List view web part to a page using javascript

Question

In a page, I need to add a list view web part when the page is loaded.

Is it possible using javascript?

Actual situation is that a list has a column States. It can have multiple values. So in dispform.aspx for each value in this column I need to add saperate list views.

When a new item is added then the user can add any number of state. So if he adds 3 state and when he goes to the dispform.aspx for the same item then he should see 3 list views for each states added.

Answer 1

function CreateView()
{
    var hostweburl = "INSERT HOST URL HERE";
    var appweburl = "INSERT APP URL HERE";
    //creating the client context
    var clientContext = new SP.ClientContext(appweburl);
    var appContextSite = new SP.AppContextSite(clientContext, hostweburl);
    //get the current web
    var web = appContextSite.get_web();
    //get all lists
    var listCollection = web.get_lists();
    //get my demo list by name "MYLIST" - alternative use getById(guid)
    var list = listCollection.getByTitle('MYLIST');
    //get the view collection to add the view
    var viewcollection = list.get_views();
    //create a viewinfo with the view properties
    var viewInfo = new SP.ViewCreationInformation();
    viewInfo.set_title("MYVIEW"); //set the title
    viewInfo.set_personalView(true); //set the view personal
    //creating the CAML query by unsing "IN"
    var query = "<Where><In><FieldRef Name="ID" /><Values>";
    //get all items selected in the UI
    var selectedItems = SP.ListOperation.Selection.getSelectedItems();
    for (var i in selectedItems) {
      //add the item ID of each selected item
      query += "<Value Type="Counter">" + selectedItems[i].id + "</Value>";
    }

    query += "</Values></In></Where>"; //close CAML XML
    //associate the query to the view
    viewInfo.set_query(query);
    //add the view to the view collection
    viewcollection.add(viewInfo);
    //load the view collection
    clientContext.load(viewcollection);
    //execute the operation async - call onQueryFailed on errors and onQuerySucceeded on success
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded() {
  //show successful message
  alert('View successfully created!');
}

function onQueryFailed(sender, args) {
  //show error message ()stacktrace
  alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

i get this code from here, i make changes to use this from webpart