Get JSON Content with Angular in Wordpress

Question

I want to dispay a JSON Array in <li> 's inside a Wordpress-Template.

This is the JSON-File: http://www2.suntrips.de/import/Output-extended.json

I have absolutly no clue how to do it.

This is my HTML

<div ng-app="appExtern" ng-controller="externCtrl">
    <ul>
        <li ng-repeat="name in Destinations">{{name}}</li>
    </ul>
</div>

And this is my JS

var appExtern = angular.module('appExtern',[]);
appExtern.controller('externCtrl', function($scope, $http) {
    $http.get("http://www2.suntrips.de/import/Output-extended.json").then(function(response) {
        $scope.Destinations = response.data;
    });
});

Can anybody help?

Answer 1

Your JSON structure is the following :

{
  "themes" : [ 
     { "id": ... , "name" : ... , "imageUrl" : ..., ... },
     { "id": ... , "name" : ... , "imageUrl" : ..., ... },
     { "id": ... , "name" : ... , "imageUrl" : ..., ... }
  ]
}

So here's how you use that :

<li ng-repeat="theme in Destinations.themes">
    <p>{{theme.name}}</p>
    <img src="{{theme.imageUrl}}"/>
</li>

(As an aside, I'm always quite astonished by the number of people who are learning Angular 1, when Angular 2 - now Angular 4 - has been in development for years and its RC1 came out in September 2016.)

Answer 2

Your JSON contains the following data :

{
    "theme" : [
        {
            "id" : 4,
            "name" : Strand,
            "imageUrl" : https://travelc.azureedge.net/themes/1869748-9bb43f9e-a7a1-4d74-bc23-7b180829a019.jpg,
            "ideas" : +[ ... ],
            "minPrice" : 922,
            "minPriceDot" : 922
        }, 
        [ ... ]       
    ]
}

So you must ng-repeat on Destination["theme"] in order to access its data. Not Destination. Following code should do the trick :

<div ng-app="appExtern" ng-controller="externCtrl">
    <ul>
        <li ng-repeat="theme in Destinations.theme">{{ theme.name }}</li>
    </ul>
</div>

Answer 3

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package suntrips
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'suntrips' ); ?></a>
    <?php if(!is_page_template( 'blank-page.php' )): ?>
    <header id="masthead" class="site-header navbar navbar-static-top" role="banner">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only"><?php echo esc_html__('Toggle navigation', 'suntrips'); ?></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                <div class="navbar-brand">
                    <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
                        <a href="<?php echo esc_url( home_url( '/' )); ?>">
                            <img src="<?php echo get_theme_mod( 'wp_bootstrap_starter_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        </a>
                    <?php else : ?>
                        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                    <?php endif; ?>

                </div>

            </div>

            <nav class="collapse navbar-collapse navbar-left" role="navigation">

                <?php
                    wp_nav_menu( array(
                        'theme_location'    => 'primary',
                        'depth'             => 3,
                        'link_before' => '', //Add wrapper in the text inside the anchor tag
                        'link_after' => '',
                        'container'         => '',
                        'container_class'   => '',
                        'container_id'      => 'navbar-collapsed',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>

            </nav>
        </div>
    </header><!-- #masthead -->

    <div ng-app="appExtern" ng-controller="externCtrl">
        <ul>
            <li ng-repeat="theme in Destinations.themes">
                <p>{{theme.name}}</p>
                <img src="{{theme.imageUrl}}"/>
            </li>
        </ul>
    </div>

    <div id="page-sub-header" style="background-image: url('<?php if(has_header_image()) { header_image(); } ?>');">
        <div class="container">
            <h1><?php esc_url(bloginfo('name')); ?></h1>
            <p><?php bloginfo( 'description'); ?></p>
        </div>
    </div>
    <div id="content" class="site-content">
        <div class="container">
            <div class="row">
                <?php endif; ?>

This is my whole header.php

function add_this_script_footer(){ 
    wp_enqueue_script('jquery');

    // Internet Explorer HTML5 support
    wp_enqueue_script( 'html5hiv',get_template_directory_uri().'/js/html5.js', array(), '3.7.0', false );
    wp_script_add_data( 'html5hiv', 'conditional', 'lt IE 9' );

    // load bootstrap js
    wp_enqueue_script('suntrips-bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array() );
    wp_enqueue_script('suntrips-themejs', get_template_directory_uri() . '/js/theme-script.js', array() );
    wp_enqueue_script( 'suntrips-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    wp_enqueue_script('angularjs', get_template_directory_uri() . '/js/angular.min.js', array() );
    wp_enqueue_script('suntrips-mainjs', get_template_directory_uri() . '/js/main.js', array() );
} 

add_action('wp_footer', 'add_this_script_footer');

This is in my functions.php

Hope anybody could find my mistake

Get JSON Content with Angular in Wordpress

Question

3 answers

solution1
2 2017-06-28 14:49:47

solution2
1 2017-06-28 14:49:19

solution3
0 2017-06-29 06:32:35

Get JSON Content with Angular in Wordpress

Question

3 answers

solution1 2 2017-06-28 14:49:47

solution2 1 2017-06-28 14:49:19

solution3 0 2017-06-29 06:32:35

solution1
2 2017-06-28 14:49:47

solution2
1 2017-06-28 14:49:19

solution3
0 2017-06-29 06:32:35