fetch data from json array

Question

please see this URL: " http://www.zaferteam.com/wp-json/posts/ " . it's json array of my website posts. i want to store each member of this array in posts array. at last in posts array will be all posts of my website in json format. at the end of the code i try to get the ID of each post. my posts ID are in-order: 34 32 20 24 but it shows: 24 24 24 24 please help me, thanks.

$(
function(){ 
//api start 
var URL = "http://www.zaferteam.com/wp-json/posts/";
//for storing feteched posts
var FetchedPost = {
    //----Start wordpress fields----
    ID:"",
    title:"",
    status:"",
    type:"",
    author:{
        ID:"",
        username:"",
        name:"",
        first_name:"",
        last_name:"",
        nickname:"",
        slug:"",
        URL:"",
        avatar:"",
        description:"",
        registered:"",
        meta:{
        linkss:{self:"", 
            archives:""
                }
            }
        },
    content: "",
    parent: "",
    links: "",
    date: "",
    modified: "",
    format: "",
    slug: "",
    guid: "",
    excerpt: "",
    menu_order: "",
    comment_status: "",
    ping_status: "",
    sticky: "",
    date_tz: "",
    date_gmt: "",
    modified_tz: "",
    modified_gmt: "",
    meta:{
        linkss:{self: "", author: ""}
        },
    featured_image:{
        ID: "", title: "", status: "", guid:""
        },
    terms:{
        category:[
                {
                ID:"",
                name:"",
                slug:"",
                description: "",
                taxonomy: "",
                parent: "",
                count: "",
                links: "",
                meta:{
                    linkss:{collection: ""}
                }
            }
        ]
    }
}
//----End wordpress fields----

//methods for fetching data from a post . [input parameter is a post]
var methods ={
//get ID of the post
    ID:function(post){
        FetchedPost.ID = post.ID;
    },
//get title of the post 
    title:function(post){
        FetchedPost.title = post.title;
    },
//get ID of the author ID   
    authorID:function(post){
        FetchedPost.author.ID = post.author.ID;
    },

//get name of the author name   
    authorName:function(post){
        FetchedPost.author.name = post.author.name;
    },
//get username of the author username   
    authorUsername:function(post){
        FetchedPost.author.username = post.author.username;
    },  
//get title of the content  
    content:function(post){
        FetchedPost.content = post.content;
    },
//get links 
    links:function(post){
        FetchedPost.links = post.links;
    },
//get the featured_image guid (featured_image links) of the post
    featuredImageGuid:function(post){

        //alert(typeof post.featured_image.guid);
        if(post.featured_image != null){
        FetchedPost.featured_image.guid = post.featured_image.guid;
        }
        else{
            FetchedPost.featured_image.guid = "#";
            }
        //alert(typeof milad);
    }   
}

function wpMain(post){
    methods.ID(post);
    methods.title(post);
    methods.authorID(post);
    methods.authorName(post);
    methods.authorUsername(post);
    methods.content(post);
    methods.links(post);
    methods.featuredImageGuid(post);
    }  

//fetch by ajax
    $.ajax({
    url: URL,
    success: function(data, status) {
        var localData = JSON.stringify(data);
        window.localStorage.setItem('WPpost', localData);
    },
    error: function() {
        //handle the error
    }
    });
var localData = JSON.parse(window.localStorage.getItem('WPpost'));
        var Length = localData.length;
        var posts = new Array();
        $.each(localData,function(index,value){
            wpMain(value);
            posts.push(FetchedPost);
            });

        $.each(posts,function(index,value){
            alert(value.ID);
            }); 
    });

Answer 1

Please try following approach:

create new function function readLocalStorageData() as follows:

function readLocalStorageData()
{
    var localData = JSON.parse(window.localStorage.getItem('WPpost'));
    var Length = localData.length;
    var posts = new Array();
    $.each(localData,function(index,value){
        wpMain(value);
        posts.push(FetchedPost);
    });

    $.each(posts,function(index,value){
        alert(value.ID);
    }); 
}

now call above function your ajax success handler as follows:

//fetch by ajax
        $.ajax({
        url: URL,
        success: function(data, status) {
            var localData = JSON.stringify(data);
            window.localStorage.setItem('WPpost', localData);

            readLocalStorageData(); //read the locally stored data
        },
        error: function() {
            //handle the error
        }
    });

Answer 2

This works fine with a local json file:

Added the test var...

var URL = "my.json";
var test;
//for storing feteched posts
var FetchedPost = {
    //----Start wordpress fields----
    ID: "",
    title: "",
    status: "",
    type: "",
    author: {
        ID: "",
        username: "",
        name: "",
        first_name: "",
        last_name: "",
        nickname: "",
        slug: "",
        URL: "",
        avatar: "",
        description: "",
        registered: "",
        meta: {
            linkss: {self: "",
                archives: ""
            }
        }
    },
    content: "",
    parent: "",
    links: "",
    date: "",
    modified: "",
    format: "",
    slug: "",
    guid: "",
    excerpt: "",
    menu_order: "",
    comment_status: "",
    ping_status: "",
    sticky: "",
    date_tz: "",
    date_gmt: "",
    modified_tz: "",
    modified_gmt: "",
    meta: {
        linkss: {self: "", author: ""}
    },
    featured_image: {
        ID: "", title: "", status: "", guid: ""
    },
    terms: {
        category: [
            {
                ID: "",
                name: "",
                slug: "",
                description: "",
                taxonomy: "",
                parent: "",
                count: "",
                links: "",
                meta: {
                    linkss: {collection: ""}
                }
            }
        ]
    }
}
//----End wordpress fields----

//methods for fetching data from a post . [input parameter is a post]
var methods = {
//get ID of the post
    ID: function (post) {
        test.ID = post.ID;
    },
//get title of the post 
    title: function (post) {
        test.title = post.title;
    },
//get ID of the author ID   
    authorID: function (post) {
        test.author.ID = post.author.ID;
    },
//get name of the author name   
    authorName: function (post) {
        test.author.name = post.author.name;
    },
//get username of the author username   
    authorUsername: function (post) {
        test.author.username = post.author.username;
    },
//get title of the content  
    content: function (post) {
        test.content = post.content;
    },
//get links 
    links: function (post) {
        test.links = post.links;
    },
//get the featured_image guid (featured_image links) of the post
    featuredImageGuid: function (post) {

        //alert(typeof post.featured_image.guid);
        if (post.featured_image != null) {
            test.featured_image.guid = post.featured_image.guid;
        }
        else {
            test.featured_image.guid = "#";
        }
        //alert(typeof milad);
    }
}

function wpMain(post)
{
    test = jQuery.extend(true, {}, FetchedPost);
    methods.ID(post);
    methods.title(post);
    methods.authorID(post);
    methods.authorName(post);
    methods.authorUsername(post);
    methods.content(post);
    methods.links(post);
    methods.featuredImageGuid(post);
}

//fetch by ajax
$.ajax({
    url: URL,
    mimeType: "application/json",
    success: function (data, status) {
        var localData = JSON.stringify(data);
        window.localStorage.setItem('WPpost', localData);
    },
    error: function () {
        //handle the error
    }
});
var localData = JSON.parse(window.localStorage.getItem('WPpost'));
var Length = localData.length;
var posts = new Array();
$.each(localData, function (index, value) {
    wpMain(value);
    posts.push(test);
});

$.each(posts, function (index, value) {
    console.log(value.ID);
});