How to get input text into array

Question

How would you push input text into an array. Then saving it in localStorage.I dont get how you would define the input html code into a variable so i could get a string of text passed on to my array index.

So far I defined my editID as the blogID which is meant to be the correspondant to the index of my array but I only get null, null, null when pressing edit. I think I am on right track it is just how to convert it into text cause I cant seem to figure out how to define input

       blogEntries=localStorage.getItem("BlogContent");
 blogEntries=JSON.parse(blogEntries);
 console.log(blogEntries);

$(document).ready(function(){

var createBlog =    
            //'<div class="blogContainer">'+
                '<div class="blogTitle">'+
            '<h1>CREATE BLOG</h1>'+

                '<input type="placeholder" class="titleInput">'+    
            '</div><br>'+
            '<div class="blogContent">'+
                '<input type="placeholder" class="contentInput">'+  
            '</div><br>'+
            '<div class="blogDate">'+
                '<input type="placeholder" class="dateInput">'+
            '</div>'+
                '<div class="blogControl">'+
                '<input type="button" class="create" value="Create">'+
                //'</div>'+
            '</div>'

                $(".createContainer").append(createBlog);

    for (var i = 0; i < blogEntries.length; i++) {

        var title=blogEntries[i][0];
        var content=blogEntries[i][1];
        var date=blogEntries[i][2];
        var blogID=i;

        var blogEdit = '<div class="blogContainer" blogID="'+blogID+'">'+
            '<div class="blogTitle"><input type="text" value="'+title+'"class="titelInput"></div>'+
            '<div class="blogContent"><input type="text" value="'+content+'"class="contentInput"></div>'+
            '<div class="blogDate"><input type="text" value="'+date+'"class="dateInput"></div>'+
            '<input type="button" value="edit" class="edit">'+
            '<input type="button" value="delete" class="delete">'+
        '</div>'+'<br><br><br>'



        $("#mainContainer").append(blogEdit);
    }


    $(".create").click(function(){
        var titleCont=$(".titleInput").val();
        var contBlog=$(".contentInput").val();
        var dateCont=$(".dateInput").val();

        createBlogPost(titleCont, contBlog, dateCont);
    });

    function createBlogPost(title, content, date){

        var newBlogPost=[title, content, date];

        blogEntries.push(newBlogPost);

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
    };



   $(".delete").click(function(){

        var deleteId=$(this).closest(".blogContainer").attr("blogID");
        console.log(deleteId);

        if(deleteId==0){
            blogEntries[0]=[null];

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
        }
        if(deleteId==1){
            blogEntries[1]=[null];

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
        }
        if(deleteId==2){
            blogEntries[2]=[null];

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
        }
   });


  $(".edit").click(function(){
    var editId=$(this).closest(".blogContainer").attr("blogID");
    var titleCont=$(".titleInput").val();
    var contBlog=$(".contentInput").val();
    var dateCont=$(".dateInput").val();

    // First read from local storage. Take empty array as default value
    var blogEntries = JSON.parse(localStorage.getItem("BlogContent"));// || "[]");
    // Use editId directly as index. Don't use .value, because .val() above already gives the value.
    blogEntries[editId] = [titleCont, contBlog, dateCont];
    // Write back to local storage


    localStorage.setItem("BlogContent", JSON.stringify(blogEntries));
});


   });

Here is pic of the blog I identify the index by clicking one of the three edit buttons that returns the value from 0-2 blogId depening on which post i click.

    var blogEntries = localStorage.getItem("BlogContent", blogEntries);
blogEntries=JSON.parse(blogEntries);



$(document).ready(function(){

    var blogEntries=[ 
                     ["Title","Content","Date"],
                     ["Title","Content","Date"],
                     ["Title","Content","Date"]
    ];



blogEntries=JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntries);


        for (var i = 0; i < blogEntries.length; i++) {
            var title=blogEntries[i][0];
            var content=blogEntries[i][1];

        var date=blogEntries[i][2];
            var blogID=i;

            var blogPost = 
            '<div class="blogContainer" blogID="0">'+
                '<div class="blogTitle">'+title+'</div>'+
                '<div class="blogContent">'+content+'</div>'+
                '<div class="blogDate">'+date+'</div>'+
            '</div>'+'<br><br><br>'



            //var blogPost = '<div class="blogContainer" blogID="'+blogID+'">'+mitVarIndhold+'</div>';


            //$(".blogContainer").append(title, content, date);
            $("#mainContainer").append(blogPost);

        }

edit included all of my two js documents I outcomment the array and localstorage after saving it so it wont genrate tons of posts.

trincot · Accepted Answer · 2018-12-07 17:12:45Z

1

You will need to read the current value from local storage each time (or else read it into a global variable on page load).

Secondly, you can use editId to access the index you need instead of having a separate if for each case:

$(".edit").click(function(){
    var container = $(this).closest(".blogContainer");
    var editId= container.attr("blogID");
    // Only get the values WITHIN the container:
    var titleCont=$(".titleInput", container).val();
    var contBlog=$(".contentInput", container).val();
    var dateCont=$(".dateInput", container).val();

    // First read from local storage. Take empty array as default value
    var blogContent = JSON.parse(localStorage.getItem("BlogContent") || "[]");
    // Use editId directly as index. Don't use .value, because .val() above already gives the value.
    blogContent[editId] = [titleCont, contBlog, dateCont];
    // Write back to local storage
    localStorage.setItem("BlogContent", JSON.stringify(blogContent));
});

When writing the HTML, you would do something similar:

// Read from local storage the complete array
var blogContent = JSON.parse(localStorage.getItem("BlogContent") || "[]");
// You have three sections, 0, 1 and 2:
for (var blogId = 0; blogId < 3; blogId++) {
    // Read corresponding blog entry. Default are three empty strings.
    var entry = blogContent[blogId] || ["", "", ""];
    // Build your HTML as you did:
    var blogEdit = '<div class="blogContainer" blogID="'+blogID+'">'+
        '<div class="blogTitle"><input type="text" value="'+entry[0]+'"class="titelInput"></div>'+
        '<div class="blogContent"><input type="text" value="'+entry[1]+'"class="contentInput"></div>'+
        '<div class="blogDate"><input type="text" value="'+entry[2]+'"class="dateInput"></div>'+
        '<input type="button" value="edit" class="edit">'+
        '<input type="button" value="delete" class="delete">'+
    '</div>'+'<br><br><br>';
    // you have code to output the above ...
    // ....
}

edited Dec 7, 2018 at 17:12

answered Dec 7, 2018 at 17:02

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

noobprogrammer1337 Over a year ago

When I run this it empties my array index how index how would it catch the input then? But thanks this makes more sense to me now

trincot Over a year ago

I don't know what you mean with "empties my array index". It would be helpful if you provided a JS fiddle or runnable snippet. I made some updates

noobprogrammer1337 Over a year ago

I edited all code into it sorry I am quite confused have fiddled with this for a while now.. And I am very new to web dev

Collectives™ on Stack Overflow

How to get input text into array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related