How to append several new objects, after the last object of an array of objects in Javascript?

Question

I am making a mobile application(Using Ionic Framework) of a news website which is made of wordpress . The json file is fetched from the site. I have to fetch same duplicate json data with some new posts from wordpress site for my app to show new news if a user continue to scroll. So I have to add/append these new several posts objects into the previous "posts" array of objects. Here is the conventional wordpress posts json file object looks like.

{
    "status": "ok",
    "count": 2,
    "count_total": 4231,
    "pages": 2116,
    "posts": [
        {
        "id": 62296,
        "type": "post",
        "slug": "any slug",
        "url": "any url",
        "status": "publish",
        "title": "any title",
        "title_plain": "any title",
        "content": "any content",
        "excerpt": "any excerpt",
        "date": "2015-02-26 02:08:57",
        "modified": "2015-02-26 02:09:59",
        "categories": [
            {
                "id": 1015,
                "slug": "any slug",
                "title": "any title",
                "description": "",
                "parent": 0,
                "post_count": 7
            }
        ],
        "tags": [
            {
                "id": 1180,
                "slug": "any slug",
                "title": "any title",
                "description": "",
                "post_count": 6
            },
            {
                "id": 1179,
                "slug": "religion",
                "title": "religion",
                "description": "",
                "post_count": 5
            },
            {
                "id": 1209,
                "slug": "any slug",
                "title": "any title",
                "description": "",
                "post_count": 4
            }
        ],
        "author": {
            "id": 1,
            "slug": "newsdesk",
            "name": "NewsDesk",
            "first_name": "",
            "last_name": "",
            "nickname": "NewsDesk",
            "url": "",
            "description": ""
        },
        "comments": [],
        "attachments": [
            {
                "id": 44930,
                "url": "anything appropriate",
                "slug": "anything appropriate",
                "title": "anything appropriate",
                "description": "",
                "caption": "",
                "parent": 62296,
                "mime_type": "image/jpeg",
                "images": {
                    "full": {
                        "url": "anything appropriate",
                        "width": 290,
                        "height": 147
                    },
                    "thumbnail": {
                        "url": "anything appropriate",
                        "width": 150,
                        "height": 147
                    },
                    "medium": {
                        "url": "anything appropriate",
                        "width": 290,
                        "height": 147
                    },
                    "large": {
                        "url": "anything appropriate",
                        "width": 290,
                        "height": 147
                    },
                    "tie-small": {
                        "url": "anything appropriate",
                        "width": 55,
                        "height": 55
                    },
                    "tie-medium": {
                        "url": "anything appropriate",
                        "width": 272,
                        "height": 125
                    },
                    "tie-large": {
                        "url": "anything appropriate",
                        "width": 290,
                        "height": 147
                    },
                    "slider": {
                        "url": "anything appropriate",
                        "width": 290,
                        "height": 147
                    },
                    "big-slider": {
                        "url": "anything appropriate",
                        "width": 290,
                        "height": 147
                    }
                }
            }
        ],
        "comment_count": 0,
        "comment_status": "open",
        "thumbnail": "anything appropriate": {
            "views": [
                "2"
            ],
            "taq_review_button_text": [
                ""
            ],
            "taq_review_button_size": [
                "medium"
            ],
            "taq_review_button_shape": [
                "square"
            ],
            "taq_review_button_color": [
                "#c7c7c7"
            ],
            "taq_button_icon": [
                "fa fa-check"
            ],
            "taq_review_button_type": [
                "flat"
            ],
            "taq_review_button_url": [
                ""
            ],
            "taq_review_title": [
                ""
            ],
            "taq_review_position": [
                ""
            ],
            "taq_review_style": [
                "stars"
            ],
            "taq_review_summary": [
                ""
            ],
            "taq_review_total": [
                ""
            ],
            "tie_hide_meta": [
                ""
            ],
            "tie_hide_author": [
                ""
            ],
            "tie_hide_share": [
                ""
            ],
            "tie_hide_related": [
                ""
            ],
            "tie_hide_check_also": [
                ""
            ],
            "tie_sidebar_pos": [
                "default"
            ],
            "tie_sidebar_post": [
                "category lifestyle"
            ],
            "tie_post_head": [
                "none"
            ],
            "tie_post_slider": [
                "59602"
            ],
            "tie_googlemap_url": [
                ""
            ],
            "tie_video_url": [
                ""
            ],
            "tie_video_self": [
                ""
            ],
            "tie_embed_code": [
                ""
            ],
            "tie_audio_m4a": [
                ""
            ],
            "tie_audio_mp3": [
                ""
            ],
            "tie_audio_oga": [
                ""
            ],
            "tie_audio_soundcloud": [
                ""
            ],
            "tie_banner_above": [
                ""
            ],
            "tie_banner_below": [
                ""
            ],
            "tie_posts_num": [
                ""
            ],
            "post_color": [
                ""
            ],
            "post_background": [
                "anything appropriate"
            ],
            "tie_views": [
                "2"
            ]
        },
        "thumbnail_size": "thumbnail",
        "thumbnail_images": {
            "full": {
                "url": "anything appropriate",
                "width": 290,
                "height": 147
            },
            "thumbnail": {
                "url": "anything appropriate",
                "width": 150,
                "height": 147
            },
            "medium": {
                "url": "anything appropriate",
                "width": 290,
                "height": 147
            },
            "large": {
                "url": "anything appropriate",
                "width": 290,
                "height": 147
            },
            "tie-small": {
                "url": "anything appropriate",
                "width": 55,
                "height": 55
            },
            "tie-medium": {
                "url": "anything appropriate",
                "width": 272,
                "height": 125
            },
            "tie-large": {
                "url": "anything appropriate",
                "width": 290,
                "height": 147
            },
            "slider": {
                "url": "anything appropriate",
                "width": 290,
                "height": 147
            },
            "big-slider": {
                "url": "anything appropriate",
                "width": 290,
                "height": 147
            }
        }
    },
    {
       //This is another "posts" object
    }
]
}

I am not very familiar with javascript. So it's giving me real pain to push new fetched posts appending into the same "posts" array.

I can save the "posts" array into a variable into my app. But can't append new fetched objects after the last posts objects into the "posts" array.

@AliHayder Yeah, so you push to the post array inside your object. — Spencer Wieczorek
– Spencer Wieczorek, Commented Feb 25, 2015 at 22:11
Hi @Mouser Actually I want to add several new "posts" objects into the main "posts" array. I am editing the question now. Sorry for the inconvenience. — Ali Hayder
– Ali Hayder, Commented Feb 26, 2015 at 7:26

Mouser · Accepted Answer · 2015-02-25 22:11:38Z

var news = {
  "status": "ok",
  "count": 2,
  "count_total": 4231,
  "pages": 2116,
  "posts": [{
    "id": 62296,
    "type": "post",
    "slug": "any slug",
    "url": "any url",
    "status": "publish",
    "title": "any title",
    "title_plain": "any title",
    "content": "any content",
    "excerpt": "any excerpt",
    "date": "2015-02-26 02:08:57",
    "modified": "2015-02-26 02:09:59",
    "categories": [{
      "id": 1015,
      "slug": "any slug",
      "title": "any title",
      "description": "",
      "parent": 0,
      "post_count": 7
    }],
    "tags": [{
      "id": 1180,
      "slug": "any slug",
      "title": "any title",
      "description": "",
      "post_count": 6
    }, {
      "id": 1179,
      "slug": "religion",
      "title": "religion",
      "description": "",
      "post_count": 5
    }, {
      "id": 1209,
      "slug": "any slug",
      "title": "any title",
      "description": "",
      "post_count": 4
    }],
    "author": {
      "id": 1,
      "slug": "newsdesk",
      "name": "NewsDesk",
      "first_name": "",
      "last_name": "",
      "nickname": "NewsDesk",
      "url": "",
      "description": ""
    },
    "comments": [],
    "attachments": [{
      "id": 44930,
      "url": "anything appropriate",
      "slug": "anything appropriate",
      "title": "anything appropriate",
      "description": "",
      "caption": "",
      "parent": 62296,
      "mime_type": "image/jpeg",
      "images": {
        "full": {
          "url": "anything appropriate",
          "width": 290,
          "height": 147
        },
        "thumbnail": {
          "url": "anything appropriate",
          "width": 150,
          "height": 147
        },
        "medium": {
          "url": "anything appropriate",
          "width": 290,
          "height": 147
        },
        "large": {
          "url": "anything appropriate",
          "width": 290,
          "height": 147
        },
        "tie-small": {
          "url": "anything appropriate",
          "width": 55,
          "height": 55
        },
        "tie-medium": {
          "url": "anything appropriate",
          "width": 272,
          "height": 125
        },
        "tie-large": {
          "url": "anything appropriate",
          "width": 290,
          "height": 147
        },
        "slider": {
          "url": "anything appropriate",
          "width": 290,
          "height": 147
        },
        "big-slider": {
          "url": "anything appropriate",
          "width": 290,
          "height": 147
        }
      }
    }],
    "comment_count": 0,
    "comment_status": "open",
    "thumbnail": "anything",
    "appropriate": {
      "views": [
        "2"
      ],
      "taq_review_button_text": [
        ""
      ],
      "taq_review_button_size": [
        "medium"
      ],
      "taq_review_button_shape": [
        "square"
      ],
      "taq_review_button_color": [
        "#c7c7c7"
      ],
      "taq_button_icon": [
        "fa fa-check"
      ],
      "taq_review_button_type": [
        "flat"
      ],
      "taq_review_button_url": [
        ""
      ],
      "taq_review_title": [
        ""
      ],
      "taq_review_position": [
        ""
      ],
      "taq_review_style": [
        "stars"
      ],
      "taq_review_summary": [
        ""
      ],
      "taq_review_total": [
        ""
      ],
      "tie_hide_meta": [
        ""
      ],
      "tie_hide_author": [
        ""
      ],
      "tie_hide_share": [
        ""
      ],
      "tie_hide_related": [
        ""
      ],
      "tie_hide_check_also": [
        ""
      ],
      "tie_sidebar_pos": [
        "default"
      ],
      "tie_sidebar_post": [
        "category lifestyle"
      ],
      "tie_post_head": [
        "none"
      ],
      "tie_post_slider": [
        "59602"
      ],
      "tie_googlemap_url": [
        ""
      ],
      "tie_video_url": [
        ""
      ],
      "tie_video_self": [
        ""
      ],
      "tie_embed_code": [
        ""
      ],
      "tie_audio_m4a": [
        ""
      ],
      "tie_audio_mp3": [
        ""
      ],
      "tie_audio_oga": [
        ""
      ],
      "tie_audio_soundcloud": [
        ""
      ],
      "tie_banner_above": [
        ""
      ],
      "tie_banner_below": [
        ""
      ],
      "tie_posts_num": [
        ""
      ],
      "post_color": [
        ""
      ],
      "post_background": [
        "anything appropriate"
      ],
      "tie_views": [
        "2"
      ]
    },
    "thumbnail_size": "thumbnail",
    "thumbnail_images": {
      "full": {
        "url": "anything appropriate",
        "width": 290,
        "height": 147
      },
      "thumbnail": {
        "url": "anything appropriate",
        "width": 150,
        "height": 147
      },
      "medium": {
        "url": "anything appropriate",
        "width": 290,
        "height": 147
      },
      "large": {
        "url": "anything appropriate",
        "width": 290,
        "height": 147
      },
      "tie-small": {
        "url": "anything appropriate",
        "width": 55,
        "height": 55
      },
      "tie-medium": {
        "url": "anything appropriate",
        "width": 272,
        "height": 125
      },
      "tie-large": {
        "url": "anything appropriate",
        "width": 290,
        "height": 147
      },
      "slider": {
        "url": "anything appropriate",
        "width": 290,
        "height": 147
      },
      "big-slider": {
        "url": "anything appropriate",
        "width": 290,
        "height": 147
      }
    }
  }]
}


var newPost = {};
newPost.id = 65869;
newPost.categories = ["a", "b", "c", "d"];
newPost.author = {
  "name": "Jimbo",
  "last-name": "BobCat"
};

news.posts.push(newPost); //append the new post object.

document.write("<pre>" + JSON.stringify(news) + "</pre>")

To show what I meant. I created a new post object and appended it using news.posts.push(newPost). push is used to append data to an array.

Suppose I have another duplicate json file like this. How can I append all the posts objects after the last objects of the previous 'posts" array.

maksbd19 · Accepted Answer · 2015-02-27 08:50:40Z

This is quite simple if you look at the operation more closely. You have one object, assume $scope.newsList = {}

$scope.newsList = {
    "status": "ok",
    "count": 2,
    "count_total": 4231,
    "pages": 2116,
    "posts": [
        {
          "id": 62296
        },
        {
          "id": 62297
        },
        {
          "id": 62296            
        },
        {
          "id": 62297
        }
    ]
};

For sake of simplicity I am considering your post object contains only the id for each posts. Now you might have attached an event handler that would process the scrolling event and fetch new posts all along. Lets assume you got another object just like this one and stored them in another scope variable $scope.newNews and assume this is like the previous object $scope.newsList

$scope.newNews= {
    "status": "ok",
    "count": 2,
    "count_total": 4231,
    "pages": 2116,
    "posts": [
        {
          "id": 62296
        },
        {
          "id": 62297
        },
        {
          "id": 62296            
        }
    ]
};

You got 4 posts in the newslist array and 3 new posts in newNews array. When you append the new one to the old one then you should get 7 posts in your old news array.

  if( $scope.newNews.status == 'ok' && $scope.newNews.count > 0 ){
    var posts = $scope.newNews.posts;

    for(var key in posts) {
      if(posts.hasOwnProperty(key)){        
        $scope.newsList.posts.push(posts[key]);        
      }
    }
  }

First we check if the status of the newly arrived object is ok or what and the number of posts received is empty or not. You news object contains an array of post objects that we are interested in. We can access that array by $scope.newNews.posts. This is the posts array and we need to work with this. Now that we got our array, we will proceed to a loop that will iterate us to every post element of this array containing all the post objects. There we will do a check if the property exists or not (by using posts.hasOwnProperty(key)). If the property key exists in the array that means the key index exists in the array (that means the value also exists in the key), we will push the value in our old news array. We can access this by $scope.newsList .posts.push(posts[key]);

Now if you check the posts list in your original or old posts array you should get all the posts altogether.

Hope this might help you.

Hi, @maksbd19 your solution is exactly what I need, but sorry it's not working properly. I have setup a bin for this, please look at this link

user937284 · Accepted Answer · 2015-02-25 22:15:39Z

1

Use the push method.

// create the new object
var new_obj = {"key":"value", "next_key":"next_value"}

// append the new object to the array
posts.push(new_obj);

// display the values in the array
for (var i = 0; i < posts.length; i++) {
    console.log(posts[i]);
}

If you want to push directly into your json object use:

json_obj.posts.push( new_obj);

To get the posts array from the json data use:

posts_array = json_obj.posts;

edited Feb 25, 2015 at 22:15

answered Feb 25, 2015 at 22:08

user937284

2,6626 gold badges28 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to append several new objects, after the last object of an array of objects in Javascript?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related